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; 

    } 
})