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

Question

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

我试图过滤列表中某个值与特定属性匹配的列表项。

我有'shownEmployees'数组，当'Show Leavers？'时复选框被选中，我想ng-repeat列表包含'leaver'属性为'Yes'的对象，否则它应该拼接它们。如果该属性为“否”，则该对象应始终包含在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

Answer 2

你需要做一些改变你的代码。请尝试下面的代码，并看看并与您的代码进行比较。

var app = angular.module('myApp',[]); 
 

 
app.controller('mainController', function($scope) { 
 

 
\t var scope = $scope; 
 
    $scope.showLeaver=false; 
 

 
\t scope.employees = [ 
 
    \t { 
 
    \t name: 'Employee One', 
 
     leaver: 'No' 
 
    }, 
 
    \t { 
 
    \t name: 'Employee Two', 
 
     leaver: 'No' 
 
    }, 
 
    \t { 
 
    \t name: 'Employee Three', 
 
     leaver: 'Yes' 
 
    } 
 
    ] 
 
    
 
    $scope.shownEmployees = $scope.employees; 
 
\t  \t $scope.showLeavers = function() { 
 
    var isYes = $scope.showLeaver == true? 'Yes':'No'; 
 
\t $scope.shownEmployees = \t $scope.employees.filter(function (el) { return el.leaver == isYes }); 
 

 
\t } 
 
$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; 

    } 
})