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

Program / 글쓴이

기본적으로 표현식과 일치하는 경우 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가 제안하는 가장 좋은 방법은 사용자 정의 필터를 사용하는 것입니다 원하는 것을 달성하기 위해.
그러나 다른 방법이 있는데, 그 중 하나는 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 내에서 생성 된 범위는 프로토 타입 상속을 사용하여 부모 범위에서 상속됩니다.

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

답변

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

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

답변

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

답변