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

Question 1

기본적으로 표현식과 일치하는 경우 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를 가지고 놀도록 설정했지만 운이 없었습니다. 플 런커 시도

Question 2

으로 @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 내에서 생성 된 범위는 프로토 타입 상속을 사용하여 부모 범위에서 상속됩니다.

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

Question 3

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

개체 : 패턴 개체를 사용하여 배열에 포함 된 개체의 특정 속성을 필터링 할 수 있습니다. 예를 들어 {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새로운 범위와 함께 사용할 필요가 없습니다 .

Question 4

를 구현할 때 사용자 지정 필터 를 사용할 수 있습니다 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