ng-filename : 단일 필드로 필터링

ng-filename : 단일 필드로 필터링

ng-repeat을 반복해서 사용하고 있는 제품이 있습니다.

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

이러한 제품을 색상별로 필터링합니다.필터는 작동하지만 제품명/설명 등에 색상이 포함되어 있으면 필터를 적용한 후에도 제품이 남아 있습니다.

필터를 모든 필드가 아닌 어레이의 색상 필드에만 적용하도록 설정하려면 어떻게 해야 합니까?

속성을 지정합니다(예:colour필터를 적용할 위치:

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

필터 페이지의 예를 참조하십시오.개체를 사용하고 색상 속성에서 색상을 설정합니다.

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

필터링할 개체와 일치하는 속성을 가진 개체를 기준으로 필터링할 수 있습니다.

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

또는 engHide 또는 show를 사용하여 특정 기준에 따라 요소를 동적으로 표시하거나 숨길 수 있습니다.

각진 필터를 조심해야 합니다.필드에서 특정 값을 선택하려면 필터를 사용할 수 없습니다.

예:

자바스크립트

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>

...당신은 아이템들만 얻을 수 있는 것이 아닙니다.TypeId 2와 itemStatus 1, 그러나 당신은 또한 아이템이 있는 아이템을 얻을 것입니다.20, 22, 202, 123 및 항목 상태 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"}]

서브는 입력 필드 또는 원하는 것입니다.

이와 같이 표시

<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 은 당신에게 좋습니다.

언급URL : https://stackoverflow.com/questions/14733136/ng-repeat-filter-by-single-field