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;
};
});
你到现在为止尝试了什么？ – MarcoS
<表边界= “1”>
请添加代码的问题，在一个评论中它是不可读的... – MarcoS