AngularJS ng Repeat - 使用复选框按单个对象属性筛选列表

Posted 2021-05-05

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

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

我有一个'显示的员工'阵列，当'显示离开者'？选中复选框，我希望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);
        }
    })

}

})

答案

使用定制过滤器：

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

另一答案

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

另一答案

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

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>

另一答案

更新：

使用下面的方法修复它。选中复选框后，会显示离开者和非离职者。未选中时，仅显示非离职者。没有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;

  }
})

以上是关于AngularJS ng Repeat - 使用复选框按单个对象属性筛选列表的主要内容，如果未能解决你的问题，请参考以下文章

使用 AngularJS 和 ng-repeat 初始化选择

关于angularjs的ng-repeat指令

如何在 AngularJs 中对字典使用 ng-repeat？

AngularJS 在 ng-repeat 元素中附加 HTML

在 AngularJS 中使用同位素（ng-repeat）

AngularJS 使用 ng-view 在 ng-repeat 中渲染不同的模板