0
円柱のJSONデータからテーブルを生成する必要があります。ここでは、表の構造はin this fiddleである必要があります。テーブルには列がない場合は、月が入力された月の日のうち、その特定の日付のその生徒に対応するデータが各行に表示されるようになりました。角度を使用してヘッダ列として日付を持つHTML表
サンプルJSONは次のとおりです。
{
"start_date":"2016-01-01 9:30:00",
"end_date":"2016-01-01 17:00:00",
"details":"Logged",
"name":"XXX"
},
{
"start_date":"2016-03-02 10:30:00",
"end_date":"2016-03-02 12:00:00",
"details":"Logged",
"name":"XXX"
},
{
"start_date":"2016-03-03 10:30:00",
"end_date":"2016-03-03 12:00:00",
"details":"Logged",
"ename":"XXX"
}
コード
<!doctype HTML>
<html ng-app="myApp">
<head>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-controller="MyCtrl">
Select student to get data :
<input type="text" value="" ng-model="search" id="search"/>
<select id="monthSel" ng-model="selMonth">
<option value="01">January</option>
<option value="02">February</option>
<option selected="selected" value="03" >March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<table border="1">
<tr >
<th>Name</th>
<th ng-repeat="data in jsonData | FilterByMonth:selMonth">{{data.start_date|dateFormat}}</th>
</tr>
<tr ng-repeat="stud in students| filter:search">
<td>{{stud}}</td>
<td ng-repeat="data in jsonData |filter:{ename:search} | FilterByMonth:selMonth ">{{data.start_date|time}} {{data.end_date|time}}</td>
</tr>
</table>
<script>
</script>
</body>
</html>
コントローラ
var app = angular.module('myApp', [ ]);
app.controller('MyCtrl', function($scope,$http) {
$scope.events = [];
$scope.scheduler = { date : new Date() };
$http.get("data.json")
.success(function(response) {
$scope.jsonData = response;
$scope.students= $scope.jsonData.map(function(a) {return a.ename;});;
$scope.students= $scope.students.reduce(function(a,b){if(a.indexOf(b)<0)a.push(b);return a;},[]);
}).error(function(response){
alert("error"+angular.toJson(response));
});
});
app.filter('dateFormat', function($filter)
{
return function(input)
{
if(input == null){ return ""; }
var _date = $filter('date')(new Date(input), 'dd/MM/yyyy');
return _date.toUpperCase();
};
});
app.filter('time', function($filter)
{
return function(input)
{
if(input == null){ return ""; }
var _date = $filter('date')(new Date(input), 'HH:mm:ss');
return _date.toUpperCase();
};
});
app.filter('FilterByMonth', function ($filter) {
return function (items, month) {
var filtered = [];
// var _date = $filter('date')(new Date(input), 'dd/MM/yyyy');
for (var i = 0; i < items.length; i++) {
var item = items[i];
var _date = new Date(item.start_date);
if (_date.getMonth()+1 == month) {
filtered.push(item);
}
}
return filtered;
};
});
これまで何を試みましたか？ {| DATEFORMAT} {data.start_date} \t
<= "1" テーブルボーダー> = "学生でスタッド|フィルタ：検索"> \t{{}}スタッド \tの {{data.start_date |時間}} {{data.end_date |時間}} \t
コメントにコードを追加してください。コメントには読み込みできません... – MarcoS