I am using an ng-repeat directive with filter like so:
我正在使用带有过滤器的ng-repeat指令,如下所示:
<div ng-repeat="person in data">
</div
i.e Showing {{data.length}}
Persons. (I am expect to pass the length value to controller)
即显示{{data.length}}人。 (我希望将长度值传递给控制器)
But i need to pass the filtered length value to controller because i do same logic based on the filtered length value.
但我需要将过滤后的长度值传递给控制器,因为我根据过滤的长度值执行相同的逻辑。
1 个解决方案
#1
2
1.Method 1
ng-repeat="item in filtered = (data | filter:filterExpr)"
Would create the filtered list.
将创建筛选列表。
filtered.length
will show the filtered length.
filtered.length将显示过滤的长度。
2.Method 2
Use $watch
for detecting the filtered length.
使用$ watch检测过滤的长度。
$scope.length = $scope.data.length;
$scope.$watch("search", function(query) {
$scope.length = $filter("filter")($scope.data, query).length;
});
Example
var app = angular.module('angularjs-starter', [])
app.controller('MainCtrl', function($scope, $filter) {
$scope.data = [{
"name": "Martin",
"age": 21
}, {
"name": "Peter",
"age": 26
}, {
"name": "Arun",
"age": 25
}, {
"name": "Maxwell",
"age": 22
}];
$scope.counted = $scope.data.length;
$scope.$watch("search", function(query) {
$scope.filteredData = $filter("filter")($scope.data, query);
});
});
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<title>Demo</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<input ng-model="search" type="text">
<br>Showing {{data.length}} Persons;
<br>Filtered {{filteredData.length}}
<ul>
<li ng-repeat="person in filteredData">
{{person.name}}
</li>
</ul>
</body>
<script>
</script>
</html>
#1
2
1.Method 1
ng-repeat="item in filtered = (data | filter:filterExpr)"
Would create the filtered list.
将创建筛选列表。
filtered.length
will show the filtered length.
filtered.length将显示过滤的长度。
2.Method 2
Use $watch
for detecting the filtered length.
使用$ watch检测过滤的长度。
$scope.length = $scope.data.length;
$scope.$watch("search", function(query) {
$scope.length = $filter("filter")($scope.data, query).length;
});
Example
var app = angular.module('angularjs-starter', [])
app.controller('MainCtrl', function($scope, $filter) {
$scope.data = [{
"name": "Martin",
"age": 21
}, {
"name": "Peter",
"age": 26
}, {
"name": "Arun",
"age": 25
}, {
"name": "Maxwell",
"age": 22
}];
$scope.counted = $scope.data.length;
$scope.$watch("search", function(query) {
$scope.filteredData = $filter("filter")($scope.data, query);
});
});
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<title>Demo</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<input ng-model="search" type="text">
<br>Showing {{data.length}} Persons;
<br>Filtered {{filteredData.length}}
<ul>
<li ng-repeat="person in filteredData">
{{person.name}}
</li>
</ul>
</body>
<script>
</script>
</html>