필터링 된 ng-repeat 데이터의 길이를 표시하는 방법
많은 객체 (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;
});
});
당신은 두 가지 방법으로 할 수 있습니다 . 에서 템플릿 과의 컨트롤러 . 템플릿에서 필터링 된 배열을 다른 변수로 설정 한 다음 원하는대로 사용할 수 있습니다. 방법은 다음과 같습니다.
<ul>
<li data-ng-repeat="user in usersList = (users | gender:filterGender)" data-ng-bind="user.name"></li>
</ul>
....
<span>{{ usersList.length | number }}</span>
예제가 필요한 경우 AngularJs 필터링 카운트 예제 / 데모를 참조하십시오.
참고 URL : https://stackoverflow.com/questions/15316363/how-to-display-length-of-filtered-ng-repeat-data
도와주세요.
'development' 카테고리의 다른 글
| 파이썬에 왜 ++와-연산자가 없는가? (0) | 2020.02.19 |
|---|---|
| 여러 공간을 단일 공간으로 대체하는 정규식 (0) | 2020.02.18 |
| Android : 확장 / 축소 애니메이션 (0) | 2020.02.18 |
| DOM parentNode와 parentElement의 차이점 (0) | 2020.02.18 |
| 브라우저에서 최대 병렬 http 연결? (0) | 2020.02.18 |