angularjs - lọc theo nhiều mô hình

Question

Điều này có vẻ như nó phải đơn giản, tôi không thể tìm thấy câu trả lời.

Hãy nói rằng tôi có một mảng dữ liệu, đặt ra như sau:

friends = [{name:'John', age:60, location:'Brighton', street:'Middle Street'}, 
{name:'Bob', age:5, location:'Brighton', street:'High Street'}]; 

Bây giờ, tôi muốn lọc dữ liệu dựa trên một đầu vào văn bản như vậy:

<input ng-model="searchText"> 
<ul> 
    <li ng-repeat="friend in friends | orderBy:'name' | filter:searchText"> 
    {{friend.name}} - {{friend.location}}</li> 
</ul> 

này hoạt động tốt nhưng nó lọc văn bản đầu vào dựa trên mọi thuộc tính của đối tượng bạn (tên, tuổi, vị trí và đường phố). Tôi muốn có thể lọc dựa trên tên và vị trí chỉ (bỏ qua tuổi và đường phố). Điều này có thể không có bộ lọc tùy chỉnh không?

Answer 1

Có, có thể bằng cách đơn giản thông qua một vị bộ lọc thay vì một chuỗi:

<li ng-repeat="friend in friends | orderBy:'name' | filter:friendContainsSearchText"> 

$scope.friendContainsSearchText = function(friend) { 
    return friend.name.indexOf($scope.searchText) >= 0 || friend.location.indexOf($scope.searchText) >= 0 
} 

Answer 2

Hoặc bạn có thể sử dụng:

<li ng-repeat="friend in friends | orderBy:'name' | filter:{ name :searchText}">

Answer 3

Sau đây là cách chúng tôi làm điều đó với một bộ lọc tùy chỉnh.

DEMO: http://plnkr.co/edit/q7tYjOvFjQHSR0QyGETj?p=preview)

[array] | search:query:columns:operator 

> query: this is the term you are looking for 
> columns: an array of the names of the properties you want to look for (if empty, will use the angular filter with query) 
> operator: a boolean to switch between OR (true) and AND (false, default) 

html

<ul> 
    <li ng-repeat="item in list | search:query:['name','location']:operator"> 
    <pre>{{item | json}}</pre> 
    </li> 
</ul> 

js

app.filter('search', function($filter) { 
    return function(input, term, fields, operator) { 
    if (!term) { 
     return input; 
    } 

    fields || (fields = []); 

    if (!fields.length) { 
     return $filter('filter')(input, term); 
    } 

    operator || (operator = false); // true=OR, false=AND 

    var filtered = [], valid; 

    angular.forEach(input, function(value, key) { 
     valid = !operator; 
     for(var i in fields) { 
     var index = value[fields[i]].toLowerCase().indexOf(term.toLowerCase()); 
     // OR : found any? valid 
     if (operator && index >= 0) { 
      valid = true; break; 
     } 
     // AND: not found once? invalid 
     else if (!operator && index < 0) { 
      valid = false; break; 
     } 
     } 
     if (valid) { 
     this.push(value); 
     } 
    }, filtered); 

    return filtered; 
    }; 
}); 

Answer 4

Bạn có thể đặt một số bộ lọc giống như ....

<div> 
    <input ng-model="Ctrl.firstName" /> 
    <input ng-model="Ctrl.age" /> 

    <li ng-repeat = "employee in Ctrl.employees | filter:{name:Ctrl.firstName} | filter:{age:Ctrl.age}">{{employee.firstName}}</li> 
</div>