필터와 $index에서 ng-repeat을 사용하는 방법

필터와 $index에서 ng-repeat을 사용하는 방법

Angular에서 ng-repeat을 사용하고 배열의 일부 요소만 출력하고 싶습니다.예:

ng-repeat="item in items | filter:($index%3 == 0)"

단, 이것은 동작하지 않습니다.정확한 요소 인덱스만 출력하면 되는 방법을 알려주세요.

코드에서 필터는 각 어레이 항목이 아닌 '항목' 어레이에 적용되므로 예상대로 작동하지 않습니다.

대신 ng-show(또는 ng-if)를 사용할 수 있습니다.

<ul>
    <li ng-repeat="item in items" ng-show="$index % 3 == 0">{{item}}</li>
</ul>

참조: http://jsfiddle.net/H7d26

편집: 보이지 않는 dom 요소를 추가하지 않으려면 ng-if 지시문을 사용합니다.

<ul>
    <li ng-repeat="item in items" ng-if="$index % 3 == 0">{{item}}</li>
</ul>

다음과 같이 사용자 정의 필터를 만듭니다.

filter('modulo', function(){
  return function (arr, div, val) {
      return arr.filter(function(item, index){
          return index % div === (val || 0);
      })
  };
});

그럼 변경하겠습니다.ng-repeat대상:

<ul ng-repeat="item in items | modulo:3">

또는 필터 기준(index % 3 === 1)예를 들어 다음과 같습니다.

<ul ng-repeat="item in items | modulo:3:1"> 

http://jsfiddle.net/Tc34P/2/

$scope.items에서 "item" 인덱스를 찾아야 합니다.이하를 참조해 주세요.

ng-repeat"item in items | filter:(items.indexOf(item)%3 == 0)

예를 들어, (이 솔루션을 접한 다른 사용자에게는) 실제의 예를 들 수 있습니다.

<div ng-repeat="item in filtered = (items | filter:customfilter | orderBy:customsort)">
    <div> This is number {{items.indexOf(item)}} in the items list on the scope.</div>
</div>

위의 예에서는 정렬 또는 필터링에 관계없이 올바른 위치를 얻을 수 있습니다.

선행 응답은 모두 동작합니다만, 필터를 사용하고 싶은 경우는, 다음의 fielen과 같이, 스스로 정의할 수도 있습니다.http://jsfiddle.net/DotDotDot/58y7u/

.filter('myFilter', function(){
    return function(data, parameter){
        var filtered=[];
        for(var i=0;i<data.length;i++){
                if(i%parameter==0)
                    filtered.push(data[i]);
        }
        return filtered;
    }
});

이렇게 불러주세요.

ng-repeat='item in items | myFilter:3'

(예를 들어 짝수로 빠르게 변경하고 싶은 경우 파라미터로 복잡도를 추가했습니다.)

즐겁게 보내세요

++

다음 기능을 사용한 필터링을 권장합니다.

ng-repeat"item in filterItems(items)"

컨트롤러 상:

$scope.filterItems= function(items) {
    var result = {};
    angular.forEach(items, function(item) {
       // if item is something.. add to result
    });
    return result;
}

이 문제를 해결하기 위한 대체 접근법은 다음 항목에 새로운 "목록"을 작성합니다(이 문맥에서 적절한 용어는 모르겠습니다).ng-repeat이 새로운 리스트는 범위 내에서 참조할 수 있습니다.

<ul class="example-animate-container">
  <li class="animate-repeat" ng-repeat="friend in filteredFriends = ((friends | filter:q:strict) | orderBy:'age')" ng-if="$index % 2 == 0">
    [{{$index + 1}}] {{filteredFriends[$index].name}} who is {{filteredFriends[$index].age}} years old.
    <span ng-if="$index+1 < filteredFriends.length">[{{$index + 2}}] {{filteredFriends[$index+1].name}} who is {{filteredFriends[$index+1].age}} years old.</span>
  </li>
</ul>

그ng-if에서span뒷부분을 래핑하면 이전 요소가 목록의 마지막 요소일 때 기본 텍스트가 표시되지 않습니다.

언급URL : https://stackoverflow.com/questions/20858395/how-to-use-ng-repeat-with-filter-and-index