[英]AngularJS ngRepeat - Use checkbox to filter list by single object property
JSFiddle: http://jsfiddle.net/ADukg/16923/ . JSFiddle: http : //jsfiddle.net/ADukg/16923/ 。
I'm trying to filter items in and out of a list where a value matches a particular property. 我试图过滤出一个值与特定属性匹配的列表中的项目。
I have a 'shownEmployees' array, and when a 'Show Leavers?' 我有一个“ shownEmployees”数组,什么时候有“显示离开者?” checkbox is selected, I want the ng-repeat list to include objects where the 'leaver' property is 'Yes', otherwise, it should splice them.
复选框已选中,我希望ng-repeat列表包含“ leaver”属性为“是”的对象,否则,应将它们拼接起来。 If the property is 'No', the object should always be included in the shownEmployees array.
如果属性为“否”,则该对象应始终包含在shownEmployees数组中。
I've done what should be more complex filters by multiple parameters using a $filter directive, but can't figure out a simpler way to filter only by the one property. 我已经使用$ filter指令通过多个参数完成了应该更复杂的过滤器,但无法找出一种更简单的仅通过一个属性进行过滤的方法。
HTML: HTML:
<md-list-item ng-repeat="employee in allEmployees.shownEmployees | orderBy: sortEmployees | filter:searchEmployees">
<md-checkbox ng-change="allEmployees.showLeavers()" ng-model="allEmployees.filters.showLeavers">Show Leavers?</md-checkbox>
- -
What I've tried to do in JS: 我在JS中尝试做的事情:
app.controller('allEmployeesController', function($scope, $http, $document) {
var _this = this;
$scope.sortEmployees = '+surname'
this.shownEmployees = $scope.employees;
this.filters = {
showLeavers: false
}
console.log('Showing leavers?: ' + this.filters.showLeavers);
this.showLeavers = function() {
console.log('Showing leavers?: ' + this.filters.showLeavers);
angular.forEach($scope.employees, function(value, key) {
if (value.leaver === 'Yes') {
if (_this.filters.showLeavers) {
_this.shownEmployees.push(value);
} else {
_this.shownEmployees.splice(value);
}
}
if (value.leaver === 'No') {
_this.shownEmployees.push(value);
}
})
}
}) })
Use custom filter: 使用自定义过滤器:
app.filter('myfilter', function() {
return function( items, showLeavers) {
var filtered = [];
var show = (showLeavers) ? 'Yes' : 'No'
angular.forEach(items, function(item) {
if(show == item.leaver) {
filtered.push(item);
}
});
return filtered;
};
});
And: 和:
<li ng-repeat="employee in shownEmployees | myfilter:showLeavers">
You need to do some changes in your code. 您需要对代码进行一些更改。 Please try this below code and take a look and compare with your code.
请尝试下面的代码,并与您的代码进行比较。
var app = angular.module('myApp',[]); app.controller('mainController', function($scope) { var scope = $scope; $scope.showLeaver=false; scope.employees = [ { name: 'Employee One', leaver: 'No' }, { name: 'Employee Two', leaver: 'No' }, { name: 'Employee Three', leaver: 'Yes' } ] $scope.shownEmployees = $scope.employees; $scope.showLeavers = function() { var isYes = $scope.showLeaver == true? 'Yes':'No'; $scope.shownEmployees = $scope.employees.filter(function (el) { return el.leaver == isYes }); } $scope.showLeavers(); })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="mainController"> <input ng-click="showLeavers()" ng-model="showLeaver" value="" type="checkbox" /> <label for="showLeavers">Show Leavers?</label> <ul> <li ng-repeat="employee in shownEmployees"> <p>Name: {{employee.name}}</p> </li> </ul> </div>
you should change function js 你应该改变功能js
this.showLeavers = function(item) {
this.shownEmployees = [];
if(item){
angular.forEach($scope.employees , function(list){
if(list.leaver === 'Yes')
this.shownEmployees.push(list);
})
}else{
this.shownEmployees = angular.copy($scope.employees);
}
}
and html 和html
<input ng-change="showLeavers(allEmployees.filters.showLeavers)" ng-model="allEmployees.filters.showLeavers" type="checkbox" id="showLeavers">
Update: 更新:
Fixed it using method below. 使用以下方法修复了它。 When checkbox selected, shows leavers and non-leavers.
选中此复选框时,显示离职者和非离职者。 When not selected, shows only non-leavers.
未选择时,仅显示非豁免。 No ng-hide expression, no use of controller.
没有ng-hide表达式,不使用控制器。 Method independent in $filter directive.
方法与$ filter指令无关。
showLeaver expression passed in as parameter to showLeavers filter. 将showLeaver表达式作为参数传递给showLeavers过滤器。
HTML: HTML:
<md-list-item ng-repeat="employee in employees | orderBy: sortEmployees | filter: searchEmployees | showLeavers:showLeaver">
<md-checkbox ng-model="showLeaver">Show Leavers?</md-checkbox>
JS: JS:
app.filter('showLeavers', function() {
return function (employees, showLeaver) {
var matches = [];
for (var i = 0; i < employees.length; i++) {
if (employees[i].leaver === 'No') {
matches.push(employees[i]);
}
if (employees[i].leaver === 'Yes' && showLeaver) {
matches.push(employees[i]);
} else if (employees[i].leaver === 'Yes' && showLeaver == false) {
matches.splice(employees[i]);
}
}
return matches;
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.