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
"color"가 "blue"가 아니라 "color"에 "blue"문자열이 포함 된 제품을 선택해야한다는 의미 이므로 둘 다 선택합니다 .

색상으로 검색 :

<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 인 항목도 가져옵니다. 필터는 {.. .} 구문은 문자열에 쿼리가 포함 된 것처럼 작동합니다.

그러나 : true 조건 을 추가하면 정확히 일치하는 항목으로 필터링됩니다.

<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