부울 속성으로 "추적 기준"으로 Angular 1.2 ng-repeat 필터링


80

부울 속성의 값을 기준으로 일부 목록 항목을 필터링하려고하는데 내가 무엇을하든 전체 목록이 항상 표시됩니다. 내가 시도한 것 중 일부는 너무 망가 져서 아무것도 표시되지 않지만 여기도 거기도 없습니다. 필터링이 원하는대로 작동하지 않습니다.

$scope.attendees = [
     {"firstname":"Steve",    "lastname":"Jobs",  "arrived":true,  "id":1}
    ,{"firstname":"Michelle", "lastname":"Jobs",  "arrived":false, "id":2}
    ,{"firstname":"Adam",     "lastname":"Smith", "arrived":true,  "id":3}
    ,{"firstname":"Megan",    "lastname":"Smith", "arrived":false, "id":4}
    ,{"firstname":"Dylan",    "lastname":"Smith", "arrived":false, "id":5}
    ,{"firstname":"Ethan",    "lastname":"Smith", "arrived":false, "id":6}
];

다음 ng-repeat 필터링 사용 :

<ul>
    <li ng-repeat="person in attendees track by person.id | filter:arrived:'false'">
            {{person.lastname}}, {{person.firstname}}
    </li>
</ul>

참조 할 수있는 모든 순열을 시도한 것 같습니다. 대부분은 다양한 StackOverflow 검색 결과에서 나왔습니다.

  • filter:'arrived'
  • filter:arrived
  • filter:'person.arrived'
  • filter:person.arrived
  • filter:{arrived:true}
  • filter:{arrived:'true'}
  • filter:{person.arrived:true}
  • filter:{person.arrived:'true'}

또한 사용자 지정 필터 기능을 만들어 보았습니다.

$scope.isArrived = function(item) {
    return item.arrived;
};

따라서 적용 :

  • filter:isArrived
  • filter:'isArrived'
  • filter:{isArrived(person)}
  • filter:isArrived(person)
  • filter:'isArrived(person)'

이들 중 어느 것도 작동하지 않는 것 같습니다. 내가 무엇을 놓치고 있습니까?

여기 내 문제를 보여주는 plnkr이 있습니다 .

답변:


252

추적 기준은 표현식의 끝에 있어야합니다.

<li ng-repeat="person in attendees | filter: {arrived: false } track by person.id">

3
얼마나 짜증나고 30 분의 낭비인가. 나는 그것이 trackBy: .."다른 모든 것과 같이"정상적으로 사용되고 작동 하기를 바란다 .
user2864740

이것은 매우 중요한 점입니다. 대부분의 선행 문자에 대해 거의 동일한 고유 값으로 추적하면 추적 기준이 표현식에서 마지막이 아니기 때문에 중복 오류가 발생했습니다. 꽤 모호한 오류 imo.
Matt S

2

@Gruff의 대답 은 옳지 만 공식 출처에서 답변을 제공합니다.

Angular ng-repeat문서에서 :

참고 : track by항상 마지막 표현식이어야합니다 .

<div ng-repeat="model in collection | orderBy: 'id' as filtered_result track by model.id">
  {{model.name}}
</div>

문서의 "인수"부분에도 나타납니다.

추적 표현식은 필터와 별칭 표현식 뒤에 마지막에 와야합니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.