如何用雙向裝訂創建複合過濾器？

我想顯示一個表中的項目列表，並允許用戶使用窗體控件過濾項目。如何用雙向裝訂創建複合過濾器？

我的問題
我能做到這一點時，控制器首先執行，但是當我改變的輸入值，表不正確的數據重新呈現。

我的問題
我怎樣才能使基於表單字段新值我的表過濾器？

活生生的例子
http://plnkr.co/edit/7uLUzXbuGis42eoWJ006?p=preview

的Javascript

var app = angular.module('plunker', []); 
app.controller('MainCtrl', function($scope) { 
    $scope.travelerFilter = 2; 
    $scope.groupFilter = "A"; 

    $scope.records = [ 
     { leadName: "Jesse", travelerCount: 1, group: "A"}, 
     { leadName: "John", travelerCount: 1, group: "B"}, 
     { leadName: "James", travelerCount: 2, group: "A"}, 
     { leadName: "Bill", travelerCount: 2, group: "B"} 
    ]; 

    var travelerCountFilter = function(record) { 
     return record.travelerCount >= $scope.travelerFilter; 
    }; 

    var groupFilter = function(record) { 
     return record.group === $scope.groupFilter; 
    }; 

    $scope.filteredRecords = _.chain($scope.records) 
     .filter(travelerCountFilter) 
     .filter(groupFilter) 
     .value(); 
});

的Html

<!doctype html> 
<html ng-app="plunker" > 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script> 
    <script src="app.js"></script> 
</head> 
<body ng-controller="MainCtrl"> 

    <p>Show records with at least <input type="number" ng-model="travelerFilter" /> travelers.</p> 
    <p>Group <input type="text" ng-model="groupFilter" /></p> 

    <table> 
     <tr> 
     <th>Name</th> 
     <th>Count</th> 
     <th>Group</th> 
     </tr> 
     <tr ng-repeat="record in filteredRecords"> 
      <td>{{record.leadName}}</td> 
      <td>{{record.travelerCount}}</td> 
      <td>{{record.group}}</td> 
     </tr> 
    </table> 
</body> 
</html>

來源

2013-04-08 jessegavin

角度可以自動雙向綁定你的一切，而不需要過濾器：

JS ：

$scope.filteredRecords = function() { 
    return $scope.records.filter(function(record, i) { 
    return record.travelerCount === $scope.travelerFilter && 
     record.group === $scope.groupFilter; 
    }); 
}

HTML：

<tr ng-repeat="record in filteredRecords()">

在這裏看到一個活生生的例子：http://plnkr.co/edit/aeBv2soGG06Trpp9WI4f?p=preview

來源

2013-04-08 19:48:23

您可以指定過濾器部分在NG-重複，即：

<tr ng-repeat="record in records | filter:{group:groupFilter} | filter:{travelerCount:travelerFilter}">

在這裏看到一個真人版：http://plnkr.co/edit/1UcGDpwUAbtvEhUyCFss?p=preview

來源

2013-04-08 17:52:22

謝謝克里斯。我絕對可以通過這種方式解決手頭的問題。我真的希望能夠在Angular中創建類似KnockoutJS計算屬性的東西，而不是創建多個過濾器。我會繼續狩獵。 – jessegavin 2013-04-08 19:22:14

如何用雙向裝訂創建複合過濾器？

回答

相關問題