AngularJS ngRepeat-使用復選框按單個對象屬性過濾列表

Question

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

我試圖過濾出一個值與特定屬性匹配的列表中的項目。

我有一個“ shownEmployees”數組，什么時候有“顯示離開者？” 復選框已選中，我希望ng-repeat列表包含“ leaver”屬性為“是”的對象，否則，應將它們拼接起來。 如果屬性為“否”，則該對象應始終包含在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">

---

演示小提琴

Answer 2

您需要對代碼進行一些更改。 請嘗試下面的代碼，並與您的代碼進行比較。

 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> 

Answer 3

你應該改變功能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);
        }
    }

和html

<input ng-change="showLeavers(allEmployees.filters.showLeavers)" ng-model="allEmployees.filters.showLeavers" type="checkbox" id="showLeavers">

Answer 4

更新：

使用以下方法修復了它。 選中此復選框時，顯示離職者和非離職者。 未選擇時，僅顯示非豁免。 沒有ng-hide表達式，不使用控制器。 方法與$ filter指令無關。

將showLeaver表達式作為參數傳遞給showLeavers過濾器。

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：

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;

  }
})