ng-repeat: filter dengan bidang tunggal


484

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?


Filter khusus juga sangat kuat =), Anda mungkin menyukainya, contoh: noypi-linux.blogspot.com/2014/07/…
Noypi Gilas


Ejaan kerja yang bagus mewarnai dengan cara yang benar
MikeKulls

Jawaban:


475

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

Terima kasih Mark, apakah ada manfaat untuk melakukannya dengan cara ini daripada metode yang disarankan di bawah ini?
Tim Webster

7
@Seglespaan, tidak juga. Anda mungkin menemukan bahwa metode yang disajikan oleh bmleite dan blesh baca lebih bagus, karena Anda dapat melihat bahwa Anda memfilter berdasarkan warna. Metode ini lebih ringkas, yang mungkin berguna jika Anda ingin mencari dengan beberapa properti, dan Anda lebih suka tidak memiliki objek panjang dalam HTML: filter:{ color: '...', size: '...', ...}
Mark Rajcok

2
@ MarkRajcok, bagaimana saya bisa mencari dengan banyak properti, melihat serikat, daripada persimpangan?
jetcom

2
@jetcom, Anda akan memerlukan filter khusus, lihat stackoverflow.com/a/13845135/215945
Mark Rajcok

1
Saya tidak tahu apakah OP menanyakan cara membuat kotak pencarian sebanyak cara memfilter nilai dalam pengulangan-ng saat mereka berulang pada halaman. Jawaban di bawah ini tampaknya paling relevan dengan pertanyaan yang diajukan.
twknab

573

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

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

5
bagaimana jika aku mau! by_colour sebagai filter: {color:! by_colour} "
rjdmello

27
@rjdmello hanya menambahkan '!'+, seperti ini<div ng-repeat="product in products | filter:{ colour: '!'+by_colour }">
bmleite

3
Tidak yakin apakah aku mengerti dengan benar, tapi hal pertama yang datang ke pikiran saya adalah: <div ng-repeat="product in products | filter:{ resultsMap.annie: '!!' }"> atau (sesuatu yang setara) seperti ini: <div ng-repeat="product in products | filter:by">dan pada controller: $scope.by = { 'resultsMap.annie': '!!' };. Pendekatan kedua ini memberi Anda lebih banyak kontrol atas properti yang sedang difilter. Catatan: '!!'berarti "bukan nol".
bmleite

2
@Federico, customFilterdapat berupa objek sederhana di scopemana Anda memperbarui kapan pun diperlukan. Periksa plunker ini .
bmleite

1
Ini harus menjadi jawaban yang diterima. Itu yang paling ringkas. Ya, kecuali bahwa 'warna' memiliki terlalu banyak vokal.
Rap

176

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.


2
katakanlah saya memiliki jenis scope.products: {id: 1, nama: 'test', warna: 'lightblue'}, {id: 2, nama: 'bob', warna: [{foreground: hitam, latar belakang :putih}] }. lalu bagaimana saya bisa memfilter produk berdasarkan warna: latar belakang untuk mendapatkan nilai putih?
Gery

2
@Gery: Jujur, saya pikir Anda tidak bisa. Either way, menggunakan filter: sama sekali semacam praktik buruk, IMO. Dalam hal itu menempatkan logika dalam pandangan Anda yang harus benar-benar ada di controller Anda, dan tidak terlalu dapat diuji.
Ben Lesh

Ini adalah cara untuk memindahkan pemfilteran ke pengontrol dan memperluas model. ozkary.com/2015/05/angularjs-value-mapping-with-dynamic.html .
ozkary

106

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

2
apakah ini seperti 'atau' tipe atau 'dan' tipe filter.
sms

1
Pertanyaan yang sama adalah apakah AND atau ATAU saat memfilter lebih dari satu properti?
LostIntranslation

1
untuk ATAU filter saja caranya adalah filter khusus, saya pikir
Dmitri Algazin

99

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.


64

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


88
<div ng-repeat="product in products | filter: { color: 'blue' }:true">hanya akan bekerja pada pencocokan tepat (yang 'benar' di akhir adalah argumen pembanding: tautan
Mark

21

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

10

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>

4

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>

Secara umum menggunakan ng-jika adalah solusi bersih
Kilizo

4

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.


1

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

0

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.