角度“ng-repeat” - 如何仅过滤两个属性

Angular `ng-repeat` - how to filter only two properties?

本文关键字：属性 两个 过滤 何仅 ng-repeat 角度      更新时间：2023-09-26

目前，我有一个搜索框和一个重复列表。我的重复列表使用具有许多属性的对象。

杰伦 

$scope.userlist = [{
  firstName: "Jack",
  lastName: "Smith",
  description: "This is a description"
}, {
  firstName: "Luke",
  lastName: "McDonald",
  description: "My name is Luke, and my friend is Jack"
}]

这是我的重复列表：

<md-list-item ng-repeat="user in userList | filter: searchInput as allResults">
  <p>{{user.firstName}} {{user.lastName}}</p>
</md-list-item>

我的搜索框模型searchInput，对象作为$scope.userList保存到范围。

如果我搜索jack，由于两个对象都包含此搜索词，因此将显示两个结果。

如何将筛选器限制为仅在firstName和lastName属性中查看？

在控制器中使用它 

$scope.searchFilter = function (user) {
    var keyword = new RegExp($scope.searchInput, 'i');
    return !$scope.searchInput || keyword.test(user.firstName) || keyword.test(user.lastName);
}

您的 HTML 将是：

<md-list-item ng-repeat="user in userList | filter: searchFilter"> 
<p>{{user.firstName}} {{user.lastName}}</p>
</md-list-item>

您可以应用此过滤器

<div ng-repeat="user in userList | filter:filterUser">

并在您的控制器中

$scope.filterUser = function(user){
    return user.firstName.indexOf($scope.searchInput) !== -1 || 
         user.lastName.indexOf($scope.searchInput) !== -1;
  }

这里有一个例子：https://jsfiddle.net/gjj2w3c8/

<md-list-item ng-repeat="user in userList | filter:{firstName:searchInput}">
  <p>{{user.firstName}} {{user.lastName}}</p>
</md-list-item>

相关文章：