ng-repeat：按單個字段過濾

本文翻譯自：ng-repeat :filter by single field

I have an array of products that I'm repeating over using ng-repeat and am using 我有一系列產品，我正在重複使用ng-repeat和我正在使用

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

to filter these products by colour. 用顏色過濾這些產品。 The filter is working but if the product name / description etc contains the colour then the product remains after the filter is applied. 過濾器正在運行，但如果產品名稱/描述等包含顏色，則在應用過濾器後產品仍然存在。

How do I set the filter to only apply to the colour field of my array rather than every field? 如何將過濾器設置爲僅應用於數組的顏色字段而不是每個字段？

---

#1樓

參考：https://stackoom.com/question/zolE/ng-repeat-按單個字段過濾

---

#2樓

See the example on the filter page. 請參閱過濾器頁面上的示例。 Use an object, and set the color in the color property: 使用對象，並在color屬性中設置顏色：

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

---

#3樓

You can filter by an object with a property matching the objects you have to filter on it: 您可以通過具有與您必須在其上過濾的對象匹配的屬性的對象進行過濾：

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

This can of course be passed in by variable, as Mark Rajcok suggested. 正如Mark Rajcok所說，這當然可以通過變量傳遞。

---

#4樓

指定要應用過濾器的屬性（即colour ）：

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

---

#5樓

Be careful with angular filter. 小心角度濾鏡。 If you want select specific value in field, you can't use filter. 如果要在字段中選擇特定值，則無法使用過濾器。

Example: 例：

javascript JavaScript的

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

html HTML

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

This will select both, because use something like substr 這將選擇兩者，因爲使用像substr這樣的東西
That means you want select product where "color" contains string "blue" and not where "color" is "blue". 這意味着你想要選擇產品，其中“顏色”包含字符串“藍色”而不是“顏色”是“藍色”。

---

#6樓

If you want to filter on a grandchild (or deeper) of the given object, you can continue to build out your object hierarchy. 如果要對給定對象的孫（或更深）進行過濾，可以繼續構建對象層次結構。 For example, if you want to filter on 'thing.properties.title', you can do the following: 例如，如果要對'thing.properties.title'進行過濾，則可以執行以下操作：

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

You can also filter on multiple properties of an object just by adding them to your filter object: 您還可以通過將對象添加到過濾器對象來過濾對象的多個屬性：

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