Question

我必须以角度生成JSON数据表，其中表应具有in this fiddle之类的结构。表格应该有列，直到没有。一个月中的月份作为输入，现在应该在每一行中显示与该学生在该特定日期对应的数据。

示例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;
      };
    });

Answer 1

在td上试试这个：

<!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 ng-repeat="stud in students| filter:search">
     <td data-title="{{data.start_date}}">{{stud}}</td>
     <td data-title="{{data.start_date}}" ng-repeat="data in jsonData |filter:{ename:search} | FilterByMonth:selMonth ">{{data.start_date|time}}  {{data.end_date|time}}</td>
  </tr>
</table>
<script>
</script>
</body>

使用数据标题执行此操作，它会自动添加您想要的值 th ，如果它不起作用，请注入 ngTable ，也许你需要它来运行该代码，这里有一个完整的例子 - ＆gt; ngTable Example

使用角度

1 个答案: