我有一个包含多个过滤器的表单,但对于某些人来说,我需要进行严格的比较。
tl; dr :严格比较user_id
而不是firstname
。
<select ng-model="search.user_id">
<option value="1">1</option>
<option value="2">2</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="23">23</option>
</select>
<input type="text" ng-model="search.firstname">
<ul>
<li ng-repeat="user in users | filter:search">#{{ user.user_id }} {{ user.firstname}}</li>
</ul>
我尝试了第三个参数true
,但它也适用于firstname
过滤器。
问题是:如果您选择值2
,则会过滤其ID中2
的所有用户,我不希望出现此行为。
这是fiddle。
答案 0 :(得分:15)
我试图在本机修复它,而不是使用自定义过滤器,它的工作原理,这里是PLUNKER LINK
必须指定多个过滤器标记
<li ng-repeat="user in users | filter:{'user_id': search.user_id}: true | filter: {'firstname' : search.firstname}">
虽然有几点需要注意:
我必须将类型从数字更改为字符串...
如果我重置完全匹配的值,它就不起作用......
所以我不得不写一个自定义文件管理器,它适用于完全匹配&amp;忽略空/空值
$scope.filter2 = function(field1, field2) {
if(field2 === "" || field2 === null) return true;
return field1 === field2;
};
你会在提供的plunker链接
中找到它们答案 1 :(得分:1)
您可以在控制器中使用这样的功能
$scope.identical = function(actual, expected){
return actual === parseInt(expected);
}
然后你可以像这样使用它
<li ng-repeat="user in users | filter:search.user_id:identical">
答案 2 :(得分:1)
由于我不能评论别人的答案,我会这样做。
我使用了HarisR的解决方案,但我对其进行了修改,因此如果您需要将数值作为数字,它也可以与数字一起使用。
$scope.filter2 = function(field1, field2) {
if(field2 === "" || field2 === null) return true;
return field1.toString() === field2;
};
或
$scope.filter2 = function(field1, field2) {
if(field2 === "" || field2 === null) return true;
return ""+field1 === field2;
};
答案 3 :(得分:1)
当我从Json加载一些表单配置时遇到了这个问题,并且数字是作为数字而不是字符串传递的。
<div ng-repeat="selectedComponent from ctrl.drivers.components |
filter:{
manufacturer: component.manufacturer,
type: component.type}:true">
当我将组件类型设置为1和10时,在我将:true
添加到我的过滤器之前,两者都会显示在我的ng-repeat中,而当我添加严格相等时,没有任何内容。
为了解决这个问题,我在控制器中添加了一个名为castToInt的方法
ctrl.castToInt = function(value){
return parseInt(value);
};
然后我修改了我的过滤器以显示
<div ng-repeat="selectedComponent from ctrl.drivers.components |
filter:{
manufacturer: component.manufacturer,
type: ctrl.castToInt(component.type)}:true">
Voila然后一切正常
我的猜测是:true
强制执行严格的相等===
,所以如果你比较不同的类型,你会得到一个假。
如果您可以接受更改值的类型,则接受的答案就足够了,但是如果您无法控制呈现给您的数据,则此方法可以正常工作。
- 托马斯
答案 4 :(得分:0)
更改html:
<li ng-repeat="user in users | filter:f">#{{ user.user_id }} {{ user.firstname}}</li>
如果两个值都存在,我假设您需要and
。如果需要,可将其更改为or
。自定义过滤功能:
$scope.f = function(val) {
var hasUserId = $scope.search.user_id;
var hasName = $scope.search.firstname;
var firstNameMatch = function() { return val.firstname.indexOf($scope.search.firstname) > -1 };
var userIdMatch = function() { return $scope.search.user_id == val.user_id };
if(hasUserId && hasName) {
return firstNameMatch() && userIdMatch()
} else if (hasUserId) {
return userIdMatch();
} else if (hasName) {
return firstNameMatch();
}
return true;
};
对您的控制器再做一次更改:
$scope.search= {};
答案 5 :(得分:0)
如果你想按姓名搜索,例如只需添加一个名称为= search.yourFieldNameToName的文本框,如果你想搜索所有字段,只需创建一个带搜索的文本框。$然后只需添加filter:search:strict ng-repeat指令。
示例代码更好地解释:
<div class="customers view">
<div class="container">
<header>
<h3>Customers</h3>
</header>
<div class="row">
<div class="span3">
Search All:
<input data-ng-model="search.$" type="text" placeholder="All Search" />
</div>
<div class="span3">
Search By Name:
<input data-ng-model="search.firstName" type="text" placeholder="First Name Search" />
</div>
<div class="span3">
Search By LastName:
<input data-ng-model="search.lastName" type="text" placeholder="Last Name Search" />
</div>
<div class="span3">
Search By City:
<input data-ng-model="search.city" type="text" placeholder="City Search" />
</div>
</div>
<div>
<div class="row cardContainer">
<div class="span3 card" data-ng-repeat="customer in customers | filter:search:strict | orderBy:'firstName'">
<button class="btn close cardClose" data-ng-click="deleteCustomer(customer.id)">×</button>
<div class="cardHeader">{{customer.firstName + ' ' + customer.lastName}}</div>
<div class="cardBody">{{customer.city}}</div>
<a href="#/customerorders/{{customer.id}}" class="cardBody btn-link">View {{ customer.orders.length }} Orders</a>
</div>
</div>
</div>
</div>