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

Z时代
2024-01-10
分类：问答

JSFiddle：http://jsfiddle.net/ADukg/16923/。AngularJS ngRepeat - 使用复选框按单个对象属性过滤列表

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

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

}）

回答：

使用自定义过滤器：

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

回答：

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

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>

回答：

你应该改变功能的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">

回答：

更新：

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