AngularJS仅对一个字段进行严格筛选

我有一个带有多个过滤器的表单，但对于某些表单，我需要进行严格的比较

tl；dr：严格比较用户名，而不是名字

我尝试了第三个参数true，但它也适用于firstname过滤器

问题是：如果选择值2，则id中包含2的所有用户都将被过滤，我不希望出现这种行为

---

这是您的控制器。

您可以在控制器中使用类似的功能

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

然后你可以像这样使用它

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

更改您的html：

<li ng-repeat="user in users | filter:f">#{{ user.user_id }} {{ user.firstname}}</li>

对控制器的另一项更改：

$scope.search= {};

---

我试着用本机修复它，而不是用自定义过滤器，它可以工作，下面是解决方法

必须指定多个过滤器标签

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

---

您可以在提供的plunker链接中找到这两个答案，因为我无法对其他答案发表评论，所以我会这样做

我使用了HarisR的解决方案，但我对其进行了修改，以便在需要数值作为数字时也可以将其与数字一起使用

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

或

---

当我从Json加载一些表单配置时，遇到了这个问题，这些数字被作为数字而不是字符串传递

<div ng-repeat="selectedComponent from ctrl.drivers.components |
     filter:{
             manufacturer: component.manufacturer, 
             type: component.type}:true">

然后我修改了我的过滤器以显示

<div ng-repeat="selectedComponent from ctrl.drivers.components |
     filter:{
             manufacturer: component.manufacturer, 
             type: ctrl.castToInt(component.type)}:true">

瞧，这一切都成功了

我的猜测是：true强制严格相等===所以如果比较不同的类型，就会得到false

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

-

---

Thomas

如果您想按名称搜索，例如，只需添加一个名为name=search.yourfieldname的文本框，如果您想在所有字段中搜索，只需创建一个名为search

更好地解释的示例代码：

<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>

---

创建自定义筛选器这不会筛选firstname。我相信他会为用户名而不是firstname编写严格的比较。我相信语法会起作用的，因为我在他自己的小提琴上试过了。我已经从我的评论中删除了语法句子，我的错是在评论之前不要测试！对于user\u id而不是firstname的严格比较，我不确定OP实际需要什么，但我的解释是他希望同时按user\u id和firstname进行过滤，但只对user\u id进行严格比较。

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

<div ng-repeat="selectedComponent from ctrl.drivers.components |
     filter:{
             manufacturer: component.manufacturer, 
             type: component.type}:true">

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">

<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>