角度過濾器 - 搜索兩個連接字段

Question

我有一個模型具有名字和姓氏屬性的人員列表。使用角度的過濾器功能，我可以創建一個基本的搜索過濾列表。然而，在它的基本形式中，用戶不能同時搜索名字和姓氏以獲得任何結果，因爲角度一次僅查看一個屬性。有沒有辦法創建連接兩個用於搜索的「虛擬」屬性？

如果我解釋說，可怕的，我平時做什麼，只是嘗試搜索「史蒂夫·喬布斯」在這個片斷：

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>

：您可以像這樣的過濾器創建一個函數