angular ng-repeat 표현식과 일치하면 항목을 건너 뜁니다.


91

기본적으로 표현식과 일치하는 경우 ng-repeat에서 항목을 건너 뛰도록 angular에게 기본적으로 지시하는 방법을 찾고 있습니다 continue.

컨트롤러에서 :

$scope.players = [{
    name_key:'FirstPerson', first_name:'First', last_name:'Person'
}, {
    name_key:'SecondPerson', first_name:'Second', last_name:'Person'
}]

이제 내 템플릿에서 일치하지 않는 모든 사람을 보여주고 싶습니다 name_key='FirstPerson'. 나는 그것이 필터 여야한다고 생각했기 때문에 Plunkr를 가지고 놀도록 설정했지만 운이 없었습니다. 플 런커 시도


나는 이해하려고 노력한다 : 당신은 모든 항목을 보여주고 싶은가? 아니면 그냥 필터?
Maxim Shoustin 2013

답변:


144

으로 @Maxim Shoustin가 제안하는 가장 좋은 방법은 사용자 정의 필터를 사용하는 것입니다 원하는 것을 달성하기 위해.
그러나 다른 방법이 있는데, 그 중 하나는 ng-if지시어를 넣었을 때 같은 요소에 지시어 를 사용하는 것입니다 ng-repeat(또한 여기에 plunker가 있습니다 ).

<ul>
    <li ng-repeat="player in players" ng-if="player.name_key!='FirstPerson'"></li>
</ul>

이것은 미학적 관점에서 사소한 단점을 제시 할 수 있지만 필터링이 players배열과 밀접하게 결합되지 않고 앱 범위의 다른 데이터에 쉽게 액세스 할 수 있는 규칙을 기반으로 할 수 있다는 큰 장점이 있습니다 .

  <li 
      ng-repeat="player in players" 
      ng-if="app.loggedIn && player.name != user.name"
  ></li>

업데이트
언급했듯이 이것은 이러한 종류의 문제 에 대한 해결책 중 하나이며 귀하의 요구에 맞거나 맞지 않을 수도 있습니다.
주석에서 지적했듯이 ng-if지시문은 실제로 예상보다 백그라운드에서 더 많은 작업을 수행 할 수 있음을 의미합니다.
예를 들어, ng-if 부모로부터 새 범위를 만듭니다 .

ngIf 내에서 생성 된 범위는 프로토 타입 상속을 사용하여 부모 범위에서 상속됩니다.

이것은 일반적으로 정상적인 동작에 영향을 미치지 않지만 예기치 않은 경우를 방지하기 위해 구현하기 전에이를 염두에 두어야합니다.


이것이 바로 제가 찾던 것이었고, 커스텀 필터없이 그것을 할 수있는 짧고 멋진 방법이 있어야한다는 것을 알고있었습니다. 감사!
aron.duby 2013

참고 : 까다로울 수있는 ng-if의 일부 범위 동작이 있습니다. 이 방법을 시도했지만 다른 곳에서 문제가 발생했습니다. 즉, 리피터가 완료 될 때 이벤트를 브로드 캐스트하는 "watcher"지시문이 있습니다. 이 리피터에 ng-if를 추가 한 후 더 이상 해당 이벤트를 발생시키지 않습니다. 사용자 지정 필터가 실제로 가장 깨끗한 방법 일 수 있습니다.
claywhipkey

@claywhipkey 맞습니다. 가장 깨끗한 방법은 필터를 사용하는 것이지만 모든 경우에 적합하지는 않습니다. 어쨌든, 댓글에 대한 thx를 보시면 데이터 필터링을 위해 지시문을 사용하는 것의 의미를 누구나 알 수 있도록 답변에 헤드 업 업데이트를 추가했음을 알 수 있습니다 .
gion_13

43

나는 이것이 오래된 것이라는 것을 알고 있지만 누군가가 다른 가능한 해결책을 찾을 경우 이것을 해결하는 또 다른 방법이 있습니다-표준 필터 기능을 사용하십시오.

개체 : 패턴 개체를 사용하여 배열에 포함 된 개체의 특정 속성을 필터링 할 수 있습니다. 예를 들어 {name : "M", phone : "1"} 조건자는 속성 이름에 "M"이 포함되고 속성 전화에 "1"이 포함 된 항목의 배열을 반환합니다. ... 문자열 앞에!를 붙여 술어를 부정 할 수 있습니다. 예를 들어 {name : "! M"} 조건자는 "M"을 포함하지 않는 속성 이름을 가진 항목의 배열을 반환합니다.

따라서 TS 예제의 경우 다음과 같이해야합니다.

<ul>
    <li ng-repeat="player in players | filter: { name_key: '!FirstPerson' }"></li>
</ul>

사용자 지정 필터를 작성할 필요가 없으며 ng-if새로운 범위와 함께 사용할 필요가 없습니다 .


요점은 간단합니다. 작성자가 언급 한대로 생성 된 사용자 지정 필터 또는 새 범위가 없습니다. 목록에서 단일 값을 건너 뛰는 데 적합합니다.
mbokil 2015-08-12

'player.name_key'에서 'player'를 생략해야한다고 생각합니다. 위의 예에서는 "{name_key : '! FirstPerson'}"이됩니다.
smithml

나는 Angular가 빈 키로 멋지게 연주 할 수 없었습니다. 에 상응하는 내장 필터를 사용하는 트릭이 player in players | filter: { name_key: '' }있습니까? 이 특정 지시문은 비어있는 플레이어 만 일치하지 않습니다 name_key. name_key: '!'비어 있지 않은 플레이어를 선택하기위한 역도 name_key작동하지 않습니다.
Eric L.

답변을 확인할 수 있습니다 .
Ilya Luzyanin 2015 년

4
이 단지 같은 경우에없는 객체 속성, 배열에 맞는지주의ng-repeat="(key, val) in player"
데이비드 에즈

19

를 구현할 때 사용자 지정 필터 를 사용할 수 있습니다 ng-repeat. 다음과 같은 것 :

 data-ng-repeat="player in players |  myfilter:search.name

myfilter.js:

app.filter('myfilter', function() {


   return function( items, name) {
    var filtered = [];

    angular.forEach(items, function(item) {

      if(name == undefined || name == ''){
        filtered.push(item);
        }

      /* only if you want start With*/
      // else if(item.name_key.substring(0, name.length) !== name){
      //   filtered.push(item);
      // }

      /* if you want contains*/
      // else if(item.name_key.indexOf(name) < 0 ){
      //   filtered.push(item);
      // }

       /* if you want match full name*/
       else if(item.name_key !== name ){
        filtered.push(item);
      }
    });

    return filtered;
  };
});

데모 Plunker


이 작업에 참여해 주셔서 감사합니다. 그 확실히 올바른하지만 난 내가 더 잘 표시 생각, 그래서 나는 코드에서 @ gion_13 대답의 쉽게가는 결국 그의 허용 대답으로
aron.duby
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.