ng-repeat: filter dengan bidang tunggal

Saya memiliki serangkaian produk yang saya ulangi menggunakan ng-repeat dan saya menggunakan

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

untuk menyaring produk ini berdasarkan warna. Filter berfungsi tetapi jika nama produk / deskripsi dll mengandung warna maka produk tetap setelah filter diterapkan.

Bagaimana cara mengatur filter agar hanya berlaku untuk bidang warna array saya daripada setiap bidang?

Lihat contoh di halaman filter . Gunakan objek, dan atur warna di properti warna:

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

Tentukan properti (yaitu colour) tempat Anda ingin filter diterapkan:

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

Anda bisa memfilter berdasarkan objek dengan properti yang cocok dengan objek yang harus Anda filter di atasnya:

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' }"> 

Ini tentu saja dapat diteruskan oleh variabel, seperti yang disarankan Mark Rajcok.

Jika Anda ingin memfilter pada cucu (atau lebih dalam) dari objek yang diberikan, Anda dapat terus membangun hierarki objek Anda. Misalnya, jika Anda ingin memfilter pada 'thing.properties.title', Anda dapat melakukan hal berikut:

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

Anda juga dapat memfilter beberapa properti objek hanya dengan menambahkannya ke objek filter Anda:

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

Cara terbaik untuk melakukan ini adalah dengan menggunakan fungsi:

html

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

javascript

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

Atau, Anda dapat menggunakan ngHide atau ngShow untuk menampilkan dan menyembunyikan elemen secara dinamis berdasarkan kriteria tertentu.

Hati-hati dengan filter sudut. Jika Anda ingin memilih nilai tertentu di bidang, Anda tidak dapat menggunakan filter.

Contoh:

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' }"> 

Ini akan memilih keduanya, karena menggunakan sesuatu seperti substr
Itu berarti Anda ingin memilih produk di mana "warna" berisi string "biru" dan bukan di mana "warna" adalah "biru".

Cari berdasarkan warna:

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

Anda dapat melakukan sarang batin juga.

filter:{prop1:{innerprop1:searchinput}}

Jika Anda melakukan hal berikut:

<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>

... Anda tidak hanya akan mendapatkan item dari itemTypeId 2 dan itemStatus 1, tetapi Anda juga akan mendapatkan item dengan itemType 20, 22, 202, 123 dan itemStatus 10, 11, 101, 123. Ini karena filter: {.. .} sintaks berfungsi seperti string berisi kueri.

Namun, jika Anda menambahkan : kondisi benar , itu akan melakukan filter dengan pencocokan tepat:

<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>

cara saya adalah ini

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"}]

sub adalah bidang Input atau apa pun yang Anda suka

Menampilkan seperti ini

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

Anda harus menggunakan filter:{color_name:by_colour}sebagai gantinya

filter:by_colour

Jika Anda ingin mencocokkan dengan satu properti dari suatu objek, maka tulis properti itu alih-alih objek, jika tidak, beberapa properti lainnya akan cocok.

Tentukan properti dalam filter, dari objek yang ingin Anda terapkan filter:

//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"
}]

Tetapi Anda ingin menerapkan filter hanya pada nama depan

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

Jika Anda ingin memfilter untuk satu bidang:

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

Jika Anda ingin memfilter untuk semua bidang:

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

dan https://docs.angularjs.org/api/ng/filter/filter bagus untuk Anda