필터링 된 ng-repeat 데이터의 길이를 표시하는 방법

438

많은 객체 (JSON 형식)가 포함 된 데이터 배열이 있습니다. 이 배열의 내용으로 다음을 가정 할 수 있습니다.

var data = [
  {
    "name": "Jim",
    "age" : 25
  },
  {
    "name": "Jerry",
    "age": 27
  }
];

이제 이러한 세부 정보를 다음과 같이 표시합니다.

<div ng-repeat="person in data | filter: query">
</div

여기서 쿼리는 사용자가 표시된 데이터를 제한 할 수있는 입력 필드로 모델링됩니다.

이제 표시중인 사람 / 사람의 현재 수를 표시하는 다른 위치가 있습니다. Showing {{data.length}} Persons

내가하고 싶은 것은 사용자가 사람을 검색하고 표시되는 데이터가 쿼리를 기반으로 필터링되면 Showing...persons현재 표시되는 사람들의 값도 변경한다는 것입니다. 그러나 일어나지 않습니다. 필터링 된 사람 대신 항상 총 인원을 데이터로 표시합니다. 필터링 된 데이터 수를 얻으려면 어떻게합니까?

javascript angularjs

— 사용자 109187
소스

746

Angular 1.3 이상 (@Tom에 신용)

별명 표현식을 사용하십시오 (문서 : Angular 1.3.0 : ngRepeat , 인수 섹션으로 아래로 스크롤 ).

<div ng-repeat="person in data | filter:query as filtered">
</div>

1.3 이전의 각도

결과를 새 변수 (예 :)에 지정 filtered하고 액세스하십시오.

<div ng-repeat="person in filtered = (data | filter: query)">
</div>

결과 수를 표시하십시오.

Showing {{filtered.length}} Persons

바이올린 비슷한 예 . 크레딧은 Pawel Kozlowski 로 이동

— 움스
소스

42

이것은 필터 실행을 반복하지 않는 간단한 대답입니다.

— agmin

3

@ 벤 : 예. 를 사용하여 컨트롤러 내에서 액세스 할 수 있습니다 $scope.filtered.length.

— Wumms

2

그것은 나를 위해 작동하지 않습니다. Logs undefined는 로깅 당시 변수가 아직 정의되지 않았기 때문일 수 있습니다. 변수를 정의하고 필터를 뷰에 적용한 후 컨트롤러의 코드가 실행되도록하려면 어떻게해야 합니까?

— Ben

6

@ 벤 : 나는 이것이 주제를 벗어난 것 같아요. 나는 jsfiddle 과 같은 커스텀 필터를 만드는 것을 고려할 것이다 . 그러나 컨트롤러 내부에서도 볼 수있다.$scope.$watch('filtered', function() { console.log('filtered:', $scope.filtered); });

— Wumms

3

limitTo :을 추가하려는 경우 1.3 이상 버전이 작동하지 않았습니다 person in data | filter:query as filtered | limitTo:5. 따라서 1.3 이전 버전을 사용해야했습니다.person in filtered = (data | filter: query) | limitTo: 5

— benjovanic

332

완성도를 높이기 위해 이전 답변 (컨트롤러 내에서 보이는 사람의 계산 수행) 외에도 아래 예제와 같이 HTML 템플릿에서 해당 계산을 수행 할 수 있습니다.

사람 목록이 data가변적이고 query모델을 사용하여 사람을 필터링 한다고 가정하면 다음 코드가 적합합니다.

<p>Number of visible people: {{(data|filter:query).length}}</p>
<p>Total number of people: {{data.length}}</p>

{{data.length}} -총 인원 수를 인쇄합니다
{{(data|filter:query).length}} -필터링 된 사람 수를 인쇄합니다

노트 필터링 된 데이터를 사용하려는 경우이 솔루션은 벌금을 작동 한 번만 페이지에. 그러나 필터링 된 데이터를 두 번 이상 사용하여 항목을 표시하고 필터링 된 목록의 길이를 표시하는 경우 AngularJS 1.3 이상에 대해 별칭 표현 (아래 설명 참조) 또는 1.3 이전의 AngularJS 버전에 대해 @Wumms 에서 제안한 솔루션을 사용하는 것이 좋습니다 .

Angular 1.3의 새로운 기능

AngularJS 제작자들은 또한 문제를 발견했으며 버전 1.3 (베타 17) 에서는 필터를 적용한 후 중계기의 중간 결과를 저장할 "별칭 (alias)"표현을 추가했습니다.

<div ng-repeat="person in data | filter:query as results">
    <!-- template ... -->
</div>

<p>Number of visible people: {{results.length}}</p>

별명 표현은 여러 필터 실행 문제를 방지 할 수 있습니다.

도움이 되길 바랍니다.

— 톰
소스

4

이것은 필터가 두 번 실행된다는 것을 의미합니까?

— 플래시

9

예, 두 번 실행됩니다.

— nathancahill

11

당신이 이것을 사용하기로 결정하기 전에 @Wumms 답변을 읽으십시오 (그리고 당신은하지 않을 것입니다 ...

— epeleg

1

귀하의 의견을 제시 할 때 답변에 별칭 표현에 대한 부분이 포함되어 있지 않습니다.

— Adam Goodwin

2

이 답변은 현재 최고 답변과 달리 여러 필터 표현식을 지원합니다. 즉){{(data|filter:query|filter:query2).length}}

— chakeda

45

가장 쉬운 방법은

<div ng-repeat="person in data | filter: query"></div>

필터링 된 데이터 길이

<div>{{ (data | filter: query).length }}</div>

— 이오네 초
소스

이것은 앨리어싱과 pre-ng-1.3 대안이 지원되지 않기 때문에 angular utils dir-paginate 지시문을 사용하는 모든 사람에게 가장 유용합니다.

— pcnate

이것은 데이터를 두 번 열거합니까?

— Jeppe

36

ngRepeat는 필터를 적용 할 때 배열의 복사본을 생성하므로 필터링 된 요소 만 참조하기 위해 소스 배열을 사용할 수 없습니다.

귀하의 경우 $filter서비스를 사용하여 컨트롤러 내부에 필터를 적용하는 것이 좋습니다 .

function MainCtrl( $scope, filterFilter ) {
  // ...

  $scope.filteredData = myNormalData;

  $scope.$watch( 'myInputModel', function ( val ) {
    $scope.filteredData = filterFilter( myNormalData, val );
  });

  // ...
}

그런 다음 filteredData대신보기 에서 속성 을 사용하십시오 . 작동중인 플 런커는 다음과 같습니다. http://plnkr.co/edit/7c1l24rPkuKPOS5o2qtx?p=preview

— 조쉬 데이비드 밀러
소스

1

내가 이해 한 것은 {{filteredData.length}}대신을 사용 한다는 것입니다 data.length. 또한 myInputModel데이터를 필터링하는 입력 쿼리에 매핑 된 모델 이라는 것을 이해했습니다 . val입력 (기본적으로 쿼리)에 입력 된 텍스트이지만 입력 할 때마다 변경됩니다. 그러나 여기는 무엇 filterFilter입니까? 나는 내 자신의 customFilter가 생성되었음을 추가 할 수 있습니다 (여기서 필터링을 위해 객체의 키를 지정할 수 있습니다).

— user109187

맞습니다. 또한 ng-repeat="person in filteredData"두 번 필터링하는 의미가 없으므로 사용 하십시오. 으로 $filter: 서비스, 당신은 단지 "필터", 예를 들어 그것을 부기 특정 필터를 요청하실 수 있습니다 dateFilter, jsonFilter당신은 사용자 정의 필터를 사용하는 경우 등 단지 대신 일반의 하나를 사용하십시오 filterFilter.

— Josh David Miller

하나의 ng-repeat에 여러 개의 필터를 적용하는 것은 어떻습니까? 값과 하나의 텍스트 입력 필드가있는 2 개의 드롭 다운이 있다고 가정하십니까?

— 연금술

필터는 단지 기능이므로 첫 번째 필터의 출력을 두 번째 필터로 전달하면됩니다.

— Josh David Miller

29

AngularJS 1.3부터는 별명을 사용할 수 있습니다.

item in items | filter:x as results

그리고 어딘가 :

<span>Total {{results.length}} result(s).</span>

에서 문서 :

필터가 적용된 후 중계기의 중간 결과를 저장할 선택적 별명 표현식을 제공 할 수도 있습니다. 일반적으로 리피터에서 필터가 활성화되어 있지만 필터링 된 결과 세트가 비어있는 경우 특수 메시지를 렌더링하는 데 사용됩니다.

예를 들면 다음과 같습니다. items in items | 결과로서의 filter : x는 반복 된 항목의 조각을 결과로 저장하지만 항목이 필터를 통해 처리 된 후에 만 가능합니다.

— 에 오신 것을 환영합니다
소스

$scope.$watch이 별칭 결과 에 적용 할 수 없습니다 . $broadcast별칭 results변수 를 사용하기 위한 팁이 있습니까?

— DeBraid

25

필터를 그룹화하여 여러 수준의 결과를 저장할 수 있다는 점도 참고하십시오.

all items: {{items.length}}
filtered items: {{filteredItems.length}}
limited and filtered items: {{limitedAndFilteredItems.length}}
<div ng-repeat="item in limitedAndFilteredItems = (filteredItems = (items | filter:search) | limitTo:25)">...</div>

여기에 데모 바이올린이 있습니다.

— 제레미
소스

13

다음은 작동 예 입니다 Plunker 참조

  <body ng-controller="MainCtrl">
    <input ng-model="search" type="text">
    <br>
    Showing {{data.length}} Persons; <br>
    Filtered {{counted}}
    <ul>
      <li ng-repeat="person in data | filter:search">
        {{person.name}}
      </li>
    </ul>
  </body>

<script> 
var app = angular.module('angularjs-starter', [])

app.controller('MainCtrl', function($scope, $filter) {
  $scope.data = [
    {
      "name": "Jim", "age" : 21
    }, {
      "name": "Jerry", "age": 26
    }, {
      "name": "Alex",  "age" : 25
    }, {
      "name": "Max", "age": 22
    }
  ];

  $scope.counted = $scope.data.length; 
  $scope.$watch("search", function(query){
    $scope.counted = $filter("filter")($scope.data, query).length;
  });
});

— 막심
소스

4

이 방법의 문제점은 필터를 두 번 실행한다는 것입니다. 한 번은 ngRepeat에서 한 번, 컨트롤러에서 한 번입니다.

— Josh David Miller

예, 맞습니다. 답변을 기반으로 작업 예를 게시 할 수 있습니까? 필터를 더 배우고 싶습니까? 감사.

— Maksym

2

확실한. 다음은 작업 Plunker의 plnkr.co/edit/7c1l24rPkuKPOS5o2qtx?p=preview은 . 방금 편집 했어

— Josh David Miller

10

당신은 두 가지 방법으로 할 수 있습니다 . 에서 템플릿 과의 컨트롤러 . 템플릿에서 필터링 된 배열을 다른 변수로 설정 한 다음 원하는대로 사용할 수 있습니다. 방법은 다음과 같습니다.

<ul>
  <li data-ng-repeat="user in usersList = (users | gender:filterGender)" data-ng-bind="user.name"></li>
</ul>
 ....
<span>{{ usersList.length | number }}</span>

예제가 필요한 경우 AngularJs 필터링 카운트 예제 / 데모를 참조하십시오.

— Hazarapet Tunanyan
소스