ng-repeat: lọc theo trường đơn

Tôi có một loạt các sản phẩm tôi đang lặp lại bằng cách sử dụng ng-repeat và đang sử dụng

<div ng-repeat="product in products | filter:by_colour"> 

để lọc các sản phẩm này theo màu sắc. Bộ lọc đang hoạt động nhưng nếu tên sản phẩm / mô tả vv chứa màu thì sản phẩm vẫn còn sau khi bộ lọc được áp dụng.

Làm cách nào để đặt bộ lọc chỉ áp dụng cho trường màu của mảng chứ không phải mọi trường?

Xem ví dụ trên trang bộ lọc . Sử dụng một đối tượng và đặt màu trong thuộc tính màu:

Search by color: <input type="text" ng-model="search.color">
<div ng-repeat="product in products | filter:search"> 

Chỉ định thuộc tính (nghĩa là colour) nơi bạn muốn áp dụng bộ lọc:

<div ng-repeat="product in products | filter:{ colour: by_colour }">

Bạn có thể lọc theo một đối tượng có thuộc tính khớp với các đối tượng bạn phải lọc trên đó:

app.controller('FooCtrl', function($scope) {
   $scope.products = [
       { id: 1, name: 'test', color: 'red' },
       { id: 2, name: 'bob', color: 'blue' }
       /*... etc... */
   ];
});

<div ng-repeat="product in products | filter: { color: 'red' }"> 

Điều này tất nhiên có thể được thông qua bởi biến, như Mark Rajcok đề xuất.

Nếu bạn muốn lọc trên một đứa cháu (hoặc sâu hơn) của đối tượng đã cho, bạn có thể tiếp tục xây dựng hệ thống phân cấp đối tượng của mình. Ví dụ: nếu bạn muốn lọc trên 'thing.properIES.title', bạn có thể thực hiện các thao tác sau:

<div ng-repeat="thing in things | filter: { properties: { title: title_filter } }">

Bạn cũng có thể lọc trên nhiều thuộc tính của một đối tượng chỉ bằng cách thêm chúng vào đối tượng bộ lọc của bạn:

<div ng-repeat="thing in things | filter: { properties: { title: title_filter, id: id_filter } }">

Cách tốt nhất để làm điều này là sử dụng một chức năng:

html

<div ng-repeat="product in products | filter: myFilter">

javascript

$scope.myFilter = function (item) { 
    return item === 'red' || item === 'blue'; 
};

Ngoài ra, bạn có thể sử dụng ngHide hoặc ngShow để hiển thị động và ẩn các phần tử dựa trên một tiêu chí nhất định.

Hãy cẩn thận với bộ lọc góc. Nếu bạn muốn chọn giá trị cụ thể trong trường, bạn không thể sử dụng bộ lọc.

Thí dụ:

javascript

app.controller('FooCtrl', function($scope) {
   $scope.products = [
       { id: 1, name: 'test', color: 'lightblue' },
       { id: 2, name: 'bob', color: 'blue' }
       /*... etc... */
   ];
});

html

<div ng-repeat="product in products | filter: { color: 'blue' }"> 

Điều này sẽ chọn cả hai, vì sử dụng một cái gì đó như substr
Điều đó có nghĩa là bạn muốn chọn sản phẩm trong đó "màu" chứa chuỗi "màu xanh" chứ không phải "màu" là "màu xanh".

Tìm kiếm theo màu sắc:

<input type="text" ng-model="searchinput">
<div ng-repeat="product in products | filter:{color:searchinput}">

bạn có thể làm một tổ bên trong quá.

filter:{prop1:{innerprop1:searchinput}}

Nếu bạn đã làm như sau:

<li class="active-item" ng-repeat="item in mc.pageData.items | filter: { itemTypeId: 2, itemStatus: 1 } | orderBy : 'listIndex'"
                id="{{item.id}}">
    <span class="item-title">{{preference.itemTitle}}</span>
</li>

... bạn sẽ không chỉ nhận được các mục của itemTypeId 2 và itemStatus 1, mà bạn còn nhận được các mục với itemType 20, 22, 202, 123 và itemStatus 10, 11, 101, 123. Điều này là do bộ lọc: {.. .} cú pháp hoạt động giống như một chuỗi chứa truy vấn.

Tuy nhiên, nếu bạn đã thêm : điều kiện đúng , nó sẽ lọc theo kết hợp chính xác:

<li class="active-item" ng-repeat="item in mc.pageData.items | filter: { itemTypeId: 2, itemStatus: 1 } : true | orderBy : 'listIndex'"
                id="{{item.id}}">
    <span class="item-title">{{preference.itemTitle}}</span>
</li>

cách của tôi là thế này

subjcts is

[{"id":"1","title":"GFATM"},{"id":"2","title":"Court Case"},{"id":"3","title":"Renewal\/Validity"},{"id":"4","title":"Change of Details"},{"id":"5","title":"Student Query"},{"id":"6","title":"Complains"}]

phụ là trường Nhập liệu hoặc bất cứ thứ gì bạn thích

Hiển thị như thế này

<div ng-if="x.id === sub" ng-repeat=" x in subjcts">{{x.title}}</div>

Bạn phải sử dụng filter:{color_name:by_colour}thay vì

filter:by_colour

Nếu bạn muốn khớp với một thuộc tính duy nhất của một đối tượng, thì hãy viết thuộc tính đó thay vì đối tượng, nếu không một số thuộc tính khác sẽ được khớp.

Chỉ định thuộc tính trong bộ lọc, của đối tượng mà bạn muốn áp dụng bộ lọc:

//Suppose Object
var users = [{
  "firstname": "XYZ",
  "lastname": "ABC",
  "Address": "HOUSE NO-1, Example Street, Example Town"
},
{
  "firstname": "QWE",
  "lastname": "YUIKJH",
  "Address": "HOUSE NO-11, Example Street1, Example Town1"
}]

Nhưng bạn muốn chỉ áp dụng bộ lọc trên tên đầu tiên

<input type = "text" ng-model = "first_name_model"/>
<div ng-repeat="user in users| filter:{ firstname: first_name_model}">

Nếu bạn muốn lọc cho một trường:

label>Any: <input ng-model="search.color"></label> <br>
<tr ng-repeat="friendObj in friends | filter:search:strict">

Nếu bạn muốn lọc cho tất cả các lĩnh vực:

 label>Any: <input ng-model="search.$"></label> <br>
 <tr ng-repeat="friendObj in friends | filter:search:strict">

và https://docs.angularjs.org/api/ng/filter/filter tốt cho bạn