AngularJS 仅对一个字段进行严格过滤

Question

我有一个包含多个过滤器的表单，但对于某些过滤器，我需要严格比较。

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。

Answer 1

我试图在本地修复它，而不是使用自定义过滤器，它的工作原理，这里是PLUNKER LINK

必须指定多个过滤器标签

<li ng-repeat="user in users | filter:{'user_id':  search.user_id}: true | filter: {'firstname' : search.firstname}">

尽管有一些警告：

1. 我不得不将类型从数字更改为字符串...

2. 如果我重置完全匹配的值，它不起作用...

所以我不得不编写一个自定义文件管理器，它适用于完全匹配并忽略空/空值

$scope.filter2 = function(field1, field2) {
  if(field2 === "" || field2 === null) return true;
  return field1 === field2;
};

您可以在提供的 plunker 链接中找到它们两个

Answer 2

你的控制器中可以有这样的功能

$scope.identical = function(actual, expected){
    return actual === parseInt(expected);
}

然后你可以这样使用它

<li ng-repeat="user in users | filter:search.user_id:identical">

Answer 3

由于我无法评论其他答案，所以我会这样做。

我使用了 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;
};

Answer 4

当我从 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">

瞧，一切都成功了

我的猜测是 :true 强制执行严格相等 === 所以如果你比较不同的类型你会得到一个错误。

如果您可以接受更改值的类型，那么接受的答案就足够了，但如果您无法控制呈现给您的数据，则此方法有效。

-- 托马斯

Answer 5

更改您的 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= {};

Forked Fiddle.

Answer 6

例如，如果您想按名称搜索，只需添加一个带有 name=search.yourFieldNameToName 的文本框，如果您想在所有字段中搜索，只需创建一个带有 search.$ 的文本框，然后在您的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)">&times;</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>