Why my angualar.js filter runs 4 times?

Question

I am trying to do pagination for the list of students to be displayed.

Though the code is incomplete.

but still i am a little puzzled about why the filter which i have created run's 4 times,

and splice's my student array.

please follow the code,

below is 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;
}


});

below is 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; 
        };
});

below is 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>

the javaScript log is as follows,

-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

Please tell me why my array is getting spliced in 4 times and i get a 0 length array,

this happens at the first load of the page.

COuld you provide a plunkr or jsfiddle? thx – apairet Aug 21 '14 at 07:21 — apairet, Aug 21 '14 at 07:21

score 0 · Accepted Answer · edited May 23 '17 at 12:13

See this answer for an explanation for the filter being triggered multiple times.

You get a 0-length array because you are using splice with two parameters, the first one being the first element of the array, the second one being the length of it. You add no more parameters, which means no elements are added.

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

Why my angualar.js filter runs 4 times?

1 Answers1