为什么我的angualar.js过滤器运行4次？
为什么我的angualar.js过滤器运行4次？
提问于 2014-08-21 07:00:55
我正在尝试对要显示的学生列表进行分页。
虽然代码不完整。
但我还是有点困惑，为什么我创建的过滤器运行了4次，
剪接是我的学生名单。
请按照密码，
下面是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长的数组，
这种情况发生在页面的第一次加载时。
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-08-21 07:24:14
有关多次触发筛选器的说明，请参见this answer。
您将得到一个0长度的数组，因为您使用的是带有两个参数的拼接，第一个参数是数组的第一个元素，第二个参数是数组的长度。您不再添加参数，这意味着没有添加任何元素。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25420122
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号