상세 속성별 ngRepeat 필터

상세 속성별 ngRepeat 필터

개체가 속성 값으로 포함된 복잡한 개체가 있는 경우 중첩된 속성 중 하나를 기준으로 필터링하려면 어떻게 해야 합니까?

이것은 OOB ng-repeat 필터로 실행할 수 있습니까?

데이터.

{
  Name: 'John Smith',
  Manager: {
     id: 123,
     Name: 'Bill Lumburg'
  }
}

반복

<li ng-repeat="e in emps | filter:Manager.Name">{{ e.Name }}</li>

필터링하려면 인수를 전달해야 합니다.

<input ng-model="filter.key">
<ul>
  <li ng-repeat="e in list | filter: {Manager: {Name: filter.key}}">
    {{e.Name}}  (Manager: {{e.Manager.Name}})
  </li>
</ul>

플런커의 예

여러 속성을 필터링하는 경우 구문은 다음과 같습니다.

<ul>
  <li ng-repeat="item in list | {filter: top_object_property_name: value, top_object_property_with_nested_objects_name: {nested_object_property_name: value}}">
       ...
  </li>
</ul>

예:

        var employees = [name: 'John', roles: [{roleName: 'Manager'},{roleName: 'Supervisor'}]];

        <li ng-repeat="staff in employees | {filter: name: 'John', roles: {roleName: 'Manager'}}">
              ...
        </li>

다중 딥 속성으로 필터링하려면 사용자 지정 필터를 생성해야 합니다.오브젝트 내의 데이터를 필터링하여 필요한 오브젝트(필터링된 오브젝트)를 반환하는 독자적인 함수를 작성해야 합니다.

예를 들어 아래 개체에서 데이터를 필터링해야 합니다.

[
{
   "document":{
      "documentid":"1",
      "documenttitle":"test 1",
      "documentdescription":"abcdef"
       }
},
{
   "document":{
      "documentid":"2",
      "documenttitle":"dfjhkjhf",
      "documentdescription":"dfhjshfjdhsj"
       }
}
]

HTML에서는 문서 목록을 표시하기 위해 ng-repeat을 사용합니다.

<div>
   //search input textbox
   <input ng-model="searchDocument" placeholder="Search">
 </div>
<div ng-repeat="document in documentList | filter: filteredDocument">
   //our html code 
</div>

컨트롤러에서는 "documenttitle"과 "documentdescription"이라는 객체의 두 가지 속성을 사용하여 필터링된 객체를 반환하는 필터 함수를 작성합니다. 코드 예는 다음과 같습니다.

function filterDocuments(document)
        {
            if($scope.searchDocument)
            {
                     if(document.documentTitle.toLowerCase().indexOf($scope.searchDocument.toLowerCase()) !== -1 || document.document.shortDescription.toLowerCase().indexOf($scope.searchDocument.toLowerCase()) !== -1)
                {
                    //returns filtered object
                    return document
                }
            }else {
               return document;
            }
        }

여기서 $scope.searchDocument는 사용자가 검색할 텍스트를 입력할 수 있는 검색 텍스트 상자(HTML 입력 태그)에 바인딩되는 범위 변수입니다.

디폴트로 실장되어 있는 angularjs nested obj 필터의 최신 버전에서는, 통상은 필터를 사용할 수 있습니다.각도 1에만 해당됩니다.

언급URL : https://stackoverflow.com/questions/27606595/ngrepeat-filter-by-deep-property