각도 필터 - 두 개의 연결된 필드 검색

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>

:이 같은 필터의 기능을 만들 수 있습니다