如何创建具有双向约束力的复合过滤器？ [英] How to create a composite filter with two way binding?
问题描述
我想显示在一个表中的项目的列表，并允许用户使用表单控件进行过滤的项目
我的问题结果
我能做到这一点，控制器首先执行的时候，但是当我改变的输入值，表不正确的数据重新呈现。
我的提问结果
我怎样才能让我的表过滤器基于表单字段新值？
活生生的例子结果
http://plnkr.co/edit/7uLUzXbuGis42eoWJ006?p=$p$pview
的JavaScript
VAR应用= angular.module（'plunker'，[]）;
app.controller（'MainCtrl'，函数（$范围）{
$ scope.travelerFilter = 2;
$ scope.groupFilter =A; $ scope.records = [
{leadName：杰西，travelerCount：1，组：A}，
{leadName：约翰，travelerCount：1，组：B}，
{leadName：詹姆斯，travelerCount：2，组：A}，
{leadName：比尔，travelerCount：2，组：B}
]; VAR travelerCountFilter =功能（记录）{
返回record.travelerCount＆GT; = $ scope.travelerFilter;
}; VAR groupFilter =功能（记录）{
返回record.group === $ scope.groupFilter;
}; $ scope.filteredRecords = _.chain（$ scope.records）
.filter（travelerCountFilter）
.filter（groupFilter）
。值（）;
}）;
HTML
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=plunker＆GT;
＆LT; HEAD＆GT;
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js＆GT;＆下; /脚本＆GT;
＆LT;脚本的src =// cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js\"></script>
＆所述; SCRIPT SRC =app.js＆GT;＆下; /脚本＆GT;
＆LT; /头＆GT;
＆LT;机身NG控制器=MainCtrl＆GT; ＆LT; P＆GT;输入类型=数字NG-模式=travelerFilter/＆GT;至少＆LT显示记录。旅行者＆LT; / P＆GT;
＆LT; P＆GT;团体和LT;输入类型=文本NG模型=groupFilter/＆GT;＆LT; / P＆GT; ＆LT;表＆gt;
＆所述; TR＆GT;
＆LT;第i个姓名和LT; /第i
＆LT;第i COUNT＆LT; /第i
百分位基团＆LT; /第i
＆LT; / TR＆GT;
＆LT; TR NG重复=纪录filteredRecords＆GT;
＆所述; TD＆GT; {{record.leadName}}＆下; / TD＆GT;
＆所述; TD＆GT; {{record.travelerCount}}＆下; / TD＆GT;
＆所述; TD＆GT; {{record.group}}＆下; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; /身体GT;
＆LT; / HTML＆GT;
角可以自动双向，绑定你的一切，无需过滤器：
JS：
$ scope.filteredRecords =功能（）{
返回$ scope.records.filter（功能（纪录，我）{
返回record.travelerCount === $ scope.travelerFilter＆放大器;＆安培;
record.group === $ scope.groupFilter;
}）;
}
HTML：
＆LT; TR NG重复=在filteredRecords记录（）＆GT;
在这里看到一个活生生的例子： http://plnkr.co/edit/ aeBv2soGG06Trpp9WI4f？p = preVIEW
I want to display a list of items in a table and allow users to filter the items using form controls.
My Problem
I am able to accomplish this when the controller first executes, but when I change the values of the inputs, the table doesn't re-render with the correct data.
My Question
How can I make my table filter based on new values in the form fields?
Live Example
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>
angular can automatically two-way-bind everything for you without the need for filters:
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()">
See here for a live example: http://plnkr.co/edit/aeBv2soGG06Trpp9WI4f?p=preview
这篇关于如何创建具有双向约束力的复合过滤器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
