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

Question

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

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

我有一个 'shownEmployees' 数组，当一个 'Show Leavers?'选中复选框，我希望 ng-repeat 列表包含“离开者”属性为“是”的对象，否则，它应该拼接它们。如果属性为“否”，则该对象应始终包含在 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

你应该改变函数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 3

您需要对代码进行一些更改。请尝试下面的代码并查看并与您的代码进行比较。

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

  }
})