Question

我正在尝试对要显示的学生列表进行分页。

虽然代码不完整。

但我仍然有点疑惑为什么我创建的过滤器运行了4次，

和splice是我的学生阵列。

请按照代码

下面的

是StudentListAppFour.js

angular.module("StudentListApp")
    .constant("elementsPerPage","4")
    .constant("startIndex","0") 
    .controller("StudentListCntrl",function($scope,elementsPerPage,startIndex){
$scope.data = [
    {
        id : 123,
        name : "John Grisham",
        major : "Computer Graphics",
        College : "Texas University",
        Grade : "A"
    },
    {
        id : 124,
        name : "Suzane Abignale",
        major : "Sociology",
        College : "Kellogs University",
        Grade : "B"
    },
    {
        id : 125,
        name : "Timothy Simsons",
        major : "Anthropology",
        College : "Nixxon Trust of Education",
        Grade : "B"
    },
    {
        id : 126,
        name : "Rick Sullivan",
        major : "Software Engineering",
        College : "Masachussate Institute of Technology",
        Grade : "A"
    },
    {
        id : 127,
        name : "Nathan Gonzales",
        major : "International Business",
        College : "Cambridge University",
        Grade : "A"
    },
    {
        id : 128,
        name : "Ridley Scott",
        major : "Computer Animation",
        College : "Masachussate Institute of Technology",
        Grade : "A"
    },
    {
        id : 129,
        name : "Jack Nicholson",
        major : "Market Grading and Statistics",
        College : "Cambridge University",
        Grade : "A"
    },
    {
        id : 130,
        name : "Jimmy Carlson",
        major : "Aironautics",
        College : "Prince of Walles University",
        Grade : "A"
    },
    {
        id : 131,
        name : "Jimmy Carlson",
        major : "Aironautics",
        College : "Prince of Walles University",
        Grade : "A"
    },
    {
        id : 132,
        name : "Garry Karlson",
        major : "Wealth Managment",
        College : "Keshav University",
        Grade : "C"
    }
];

$scope.studentsPerPage = parseInt(elementsPerPage);
$scope.studentFirstIndex = parseInt(startIndex);
$scope.studentLastIndex = parseInt(elementsPerPage);

$scope.getNextBatch = function(){
    var totalStudents = $scope.data.length;
    var firstIndex = $scope.studentFirstIndex + $scope.studentsPerPage;
    var lastIndex = firstIndex + $scope.studentsPerPage;
    if(lastIndex > totalStudents){
        lastIndex = totalStudents;
    }
    $scope.studentFirstIndex = firstIndex;
    $scope.studentLastIndex = lastIndex;
}


});

下面是paginationFilter.js，

angular.module("PaginationModule",[])
    .filter("paginationFilter",function(){
        return function(students,firstIndex,lastIndex){
            console.log("-First Index "+firstIndex);
            console.log("-Last Index "+lastIndex);
            console.log(students.splice(firstIndex,lastIndex).length);
            return students; 
        };
});

下面的

是Ext04.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Filter in Controller</title>
    <script type="text/javascript" src="D:\Rahul Shivsharan\JavaScript-Framework\AngularJS\angular.js"></script>        
    <script type="text/javaScript">
        angular.module("StudentListApp",['PaginationModule'])
    </script>
    <script src="StudentListAppFour.js" type="text/javaScript"></script>
    <script src="paginationFilter.js" type="text/javaScript"></script>      
</head>
<body ng-controller="StudentListCntrl" ng-app="StudentListApp">
    <table>
            <thead>
                <th>Name</td>
                <th>Course</td>
                <th>College</td>
                <th>Grade</td>                  
            </thead>
            <tbody>
                <tr ng-repeat="student in data | paginationFilter:studentFirstIndex:studentLastIndex">
                    <td>{{student.name}}</td>
                    <td>{{student.major}}</td>
                    <td>{{student.College}}</td>
                    <td>{{student.Grade}}</td>                      
                </tr>
                <tr align="center">
                    <td colspan="4">
                        <input id="prevBTN" type="button" value="<"  />
                        <input id="nextBTN" type="button" value=">" ng-click="getNextBatch()" />
                    </td>                       
                </tr>   
            </tbody>                
    </table>
</body>     
</html>

javaScript日志如下，

-First Index 0
-Last Index 4 
4 
-First Index 0 
-Last Index 4 
4 
-First Index 0 
-Last Index 4 
2 
-First Index 0 
-Last Index 4 
0

请告诉我为什么我的阵列被拼接了4次，我得到一个0长度的数组，

这是在第一次加载页面时发生的。

Answer 1

有关多次触发过滤器的说明，请参阅this answer。

你得到一个0长度的数组，因为你使用带有两个参数的splice，第一个是数组的第一个元素，第二个是它的长度。您不再添加参数，这意味着不添加任何元素。

请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

为什么我的angularjs过滤器运行4次？

1 个答案: