ng-repeat: กรองตามฟิลด์เดียว

ฉันมีชุดผลิตภัณฑ์ที่ฉันใช้ซ้ำโดยใช้ ng-repeat และกำลังใช้งานอยู่

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

เพื่อกรองผลิตภัณฑ์เหล่านี้ตามสี ตัวกรองทำงานอยู่ แต่ถ้าชื่อ / คำอธิบายผลิตภัณฑ์ ฯลฯ มีสีผลิตภัณฑ์จะยังคงอยู่หลังจากที่ใช้ตัวกรอง

ฉันจะตั้งค่าตัวกรองให้ใช้กับฟิลด์สีของอาร์เรย์ของฉันมากกว่าทุกฟิลด์ได้อย่างไร

ดูตัวอย่างในหน้าตัวกรอง ใช้วัตถุและตั้งค่าสีในคุณสมบัติสี:

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

ระบุคุณสมบัติ (เช่นcolour) ที่คุณต้องการใช้ตัวกรอง:

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

คุณสามารถกรองโดยวัตถุที่มีคุณสมบัติตรงกับวัตถุที่คุณต้องกรอง:

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

แน่นอนว่าสิ่งนี้สามารถส่งผ่านโดยตัวแปรตามที่ Mark Rajcok แนะนำ

หากคุณต้องการกรองหลาน (หรือลึกกว่า) ของวัตถุที่กำหนดคุณสามารถสร้างลำดับชั้นวัตถุของคุณต่อไปได้ ตัวอย่างเช่นหากคุณต้องการกรอง 'thing.properties.title' คุณสามารถทำสิ่งต่อไปนี้:

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

คุณยังสามารถกรองคุณสมบัติหลายอย่างของวัตถุเพียงแค่เพิ่มลงในวัตถุตัวกรองของคุณ:

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

วิธีที่ดีที่สุดในการทำเช่นนี้คือการใช้ฟังก์ชั่น:

HTML

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

จาวาสคริปต์

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

หรือคุณสามารถใช้ ngHide หรือ ngShow เพื่อแสดงและซ่อนองค์ประกอบแบบไดนามิกตามเกณฑ์ที่กำหนด

ระวังตัวกรองเชิงมุม หากคุณต้องการเลือกค่าเฉพาะในฟิลด์คุณไม่สามารถใช้ตัวกรองได้

ตัวอย่าง:

จาวาสคริปต์

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

สิ่งนี้จะเลือกทั้งสองอย่างเนื่องจากใช้บางอย่างเช่นsubstr
นั่นหมายความว่าคุณต้องการเลือกผลิตภัณฑ์โดยที่ "สี" มีสตริง "สีน้ำเงิน" และไม่ใช่ตำแหน่งที่ "สี" เป็น "สีฟ้า"

ค้นหาตามสี:

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

คุณสามารถทำรังด้านในได้เช่นกัน

filter:{prop1:{innerprop1:searchinput}}

หากคุณต้องทำดังต่อไปนี้:

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

... คุณจะไม่ได้รับไอเท็มของ itemTypeId 2 และ itemStatus 1 เท่านั้น แต่คุณจะได้ไอเท็มที่มี itemType 20, 22, 202, 123 และ itemStatus 10, 11, 101, 123 นี่เป็นเพราะตัวกรอง: {.. .} ไวยากรณ์ทำงานเหมือนสตริงมีคิวรี

อย่างไรก็ตามหากคุณต้องเพิ่มเงื่อนไข: จริงมันจะกรองตามการจับคู่ที่แน่นอน:

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

ทางของฉันคือสิ่งนี้

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 คือฟิลด์อินพุตหรืออะไรก็ได้ที่คุณชอบ

แสดงแบบนี้

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

คุณต้องใช้ filter:{color_name:by_colour}แทน

filter:by_colour

หากคุณต้องการจับคู่กับคุณสมบัติเดียวของวัตถุให้เขียนคุณสมบัตินั้นแทนวัตถุมิฉะนั้นคุณสมบัติอื่น ๆ จะได้รับการจับคู่

ระบุคุณสมบัติในตัวกรองของวัตถุที่คุณต้องการใช้ตัวกรอง:

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

แต่คุณต้องการใช้ตัวกรองเฉพาะกับชื่อ

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

หากคุณต้องการตัวกรองสำหรับหนึ่งฟิลด์:

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

หากคุณต้องการตัวกรองสำหรับฟิลด์ทั้งหมด:

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

และ https://docs.angularjs.org/api/ng/filter/filterดีสำหรับคุณ