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

JAVASCRIPT / 글쓴이

많은 객체 (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현재 표시되는 사람들의 값도 변경한다는 것입니다. 그러나 일어나지 않습니다. 필터링 된 사람 대신 항상 총 인원을 데이터로 표시합니다. 필터링 된 데이터 수를 얻으려면 어떻게합니까?

답변

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 로 이동

답변

완성도를 높이기 위해 이전 답변 (컨트롤러 내에서 보이는 사람의 계산 수행) 외에도 아래 예제와 같이 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>

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

도움이 되길 바랍니다.

답변

가장 쉬운 방법은

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

필터링 된 데이터 길이 

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

답변

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

답변

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

item in items | filter:x as results

그리고 어딘가 :

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

에서 문서 :

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

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

답변

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

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>

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

답변

다음은 작동 예 입니다 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;
  });
});