javascript - AngularJS ngRepeat - 使用复选框按单个对象属性过滤列表

Question

JSFiddle:http://jsfiddle.net/ADukg/16923/ .

我正在尝试过滤值与特定属性匹配的列表中的项目。

我有一个 'shownEmployees' 数组，当 'Show Leavers' 时？选中复选框，我希望 ng-repeat 列表包含“leaver”属性为"is"的对象，否则，它应该拼接它们。如果该属性为“否”，则该对象应始终包含在 shownEmployees 数组中。

我已经使用 $filter 指令通过多个参数完成了应该更复杂的过滤器，但无法找到一种更简单的方法来仅通过一个属性进行过滤。

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>

-

我在 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);
        }
    })

}

})

Answer 1

使用自定义过滤器:

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

和:

 <li ng-repeat="employee in shownEmployees | myfilter:showLeavers">

---

Demo Fiddle