Question

在这段代码中，我试图通过单击表头来对特定列中的数据进行排序。它排序不起作用，直到结束日期为止。它不适用于没有天数和列的列。没有剩余的日子。有人有任何解决方案吗？

                var app= angular.module("myapp",[]);
                app.controller("mycontroller",function ($scope, $http)

                    {

                        //subtraction between dates
                        $scope.CurrentDate=new Date();
                        $scope.calDate = function(date1, date2){
                           var dateOut1 = new Date(date1);
                           var dateOut2 = new Date(date2);
                           var timeDiff = Math.abs(dateOut2.getTime() - dateOut1.getTime());

                           var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)); 
                           return diffDays;
                        };
                        $scope.getToday = function(){
                            return new Date();
                        }

                    });    

</script>
<body ng-app ="myapp" ng-controller="mycontroller">
    <table border=1>
                <tr>

                    <th ng-click="sortData('name')">Name of student <div ng-class="getSortClass('name')"></div></th>
                   .
                   .
                   .
                   .
                    <th ng-click="sortData('edate')">End date of course <div ng-class="getSortClass('edate')" ></th>
                    <th> No of days </th>  //sorting is not working on this column
                    <th>No of Days remaining </th> //sorting is not working on this column

                </tr>
                    <tr   ng-repeat="x in names  | filter: searchText | orderBy:sortColumn:reverSort">

                        <td>{{x.name}}</td>
                        <td>{{x.cname}}</td>
                        <td >{{x.cfees}}</td>
                        <td>{{x.fpaid }}</td>
                        <td>{{x.bfees}}</td>
                        <td>{{x.sdate | date:'dd-MM-yyyy'}}</td>
                        <td>{{x.edate | date:'dd-MM-yyyy'}}</td>
                        <td>{{calDate(x.edate,x.sdate)}}</td>
                        <td>{{calDate(x.edate,getToday()| date:'dd-MM-yyyy')}}</td>                     
                </tr>

            </table>

Answer 1

calDate是一个函数，它不是ng-repeat数据的一部分。尝试将其添加到名称集合中，如下所示。

 $scope.names = <your code to populate names>;

    angular.forEach($scope.names, function(name){
          name.NoOfDays = $scope.calDate(name.edate, name.sdate);
          name.DaysRemaining = $scope.calDate(name.edate, $scope.gettoday());
   });

然后你可以用HTML绑定它，如下所示。

<td>{{x.NoOfDays}}</td>
<td>{{x.DaysRemaining| date:'dd-MM-yyyy')}}</td>

AngularJS：对包含函数的ng-repeat表进行排序

1 个答案: