为什么我的angular .js过滤器运行了4次

Why my angualar.js filter runs 4 times?

本文关键字：运行 4次 过滤器 js 我的 angular 为什么      更新时间：2023-09-26

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

虽然代码不完整。

但我仍然有点困惑为什么我创建的过滤器运行了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长度的数组，

查看此答案，了解多次触发过滤器的原因。

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

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

相关文章：