javascript - Angular 过滤器 - 搜索两个串联字段

Question

我有一个模型具有名字和姓氏属性的人员列表。使用 Angular 的过滤功能，我可以创建一个基本的搜索来过滤列表。然而，在其基本形式中，用户无法同时搜索名字和姓氏来获取任何结果，因为 Angular 一次仅查看一个属性。有没有办法创建“虚拟”属性来连接另外两个属性以用于搜索？

如果我解释得很糟糕(我通常这样做)，只需尝试在此片段中搜索“Steve Jobs”:

var app = angular.module('app', []);

app.controller('myCtrl', function($scope) {
  $scope.people = [
    {first: 'John', last: 'Smith'},
    {first: 'Jane', last: 'Doe'},
    {first: 'Bill', last: 'Gates'},
    {first: 'John', last: 'Krasinski'},
    {first: 'Ada', last: 'Lovelace'},
    {first: 'Brad', last: 'Pitt'},
    {first: 'Steve', last: 'Jobs'},
    {first: 'Bill', last: 'Clinton'},
    {first: 'Britishname', last: 'Complicated'},
    {first: 'Steve', last: 'Wozniak'}
  ];
});

<div ng-app="app" ng-controller="myCtrl">
  <input type="text" ng-model="search" placeholder="Search...">
  
  <ul>
    <li ng-repeat="person in people | filter: search">
      {{person.first}} {{person.last}}
    </li>
  </ul>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

Answer 1

事实上，我已经自己解决了这个问题，但我将把这个留给其他人。您可以为过滤器创建一个函数，如下所示:

var app = angular.module('app', []);

app.controller('myCtrl', function($scope) {
  $scope.people = [
    {first: 'John', last: 'Smith'},
    {first: 'Jane', last: 'Doe'},
    {first: 'Bill', last: 'Gates'},
    {first: 'John', last: 'Krasinski'},
    {first: 'Ada', last: 'Lovelace'},
    {first: 'Brad', last: 'Pitt'},
    {first: 'Steve', last: 'Jobs'},
    {first: 'Bill', last: 'Clinton'},
    {first: 'Britishname', last: 'Complicated'},
    {first: 'Steve', last: 'Wozniak'}
  ];
  
  $scope.criteriaMatch = function(criteria) {
    return function(person) {
      var concatenated = person.first + ' ' + person.last;
      return !criteria || concatenated.toLowerCase().indexOf(criteria.toLowerCase()) !== -1;
    }
  };
});

<div ng-app="app" ng-controller="myCtrl">
  <input type="text" ng-model="search" placeholder="Search...">
  
  <ul>
    <li ng-repeat="person in people | filter: criteriaMatch(search)">
      {{person.first}} {{person.last}}
    </li>
  </ul>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>