반응형
서브 오브젝트 속성을 기반으로 한ng-repeating
jsfiddle http://jsfiddle.net/KfSBq/
서브오브젝트란 ng-repeat으로 표시하는 오브젝트에는 모두 오브젝트 리스트가 포함되어 있으며, 그 서브오브젝트 중 하나의 속성을 바탕으로 필터링을 하려고 합니다.
이것만 해도 꽤 간단했다.나는 의 목적이 있다dailies, 각각을 포함합니다.date그리고entries오브젝트 리스트:
function Ctrl($scope) {
$scope.dailies = [{date: new Date('07/07/2013'),
entries: [{category: 'A', note:'Lorem ipsum'},
{category: 'B', note: 'Lorem ipsum'}]},
{date: new Date('05/02/2013'),
entries: [{category: 'A', note: 'Lorem ipsum'}]}];
}
카테고리별로 필터링하여 표시합니다.
<div ng-controller="Ctrl">
<div class="daily" ng-repeat="daily in dailies | orderBy:'-date' ">
{{ daily.date | date:'dd/MM/y' }}
<div class="entry" ng-repeat="entry in daily.entries | filter:{ category: 'B'} ">
<span>{{ entry.category }}</span>, <span>{{ entry.note }}</span>
</div>
</div>
</div>
여기서의 문제는 현재 엔트리가 전혀 포함되지 않은 일별 객체가 여전히 표시되는 것입니다.필터링에 의해, 이 필터가, 이 필터가, 이 필터가entries의 리스트daily비어 있다daily표시도 안 되나요?
식 내에 새로운 스코프 멤버를 작성할 수 있습니다.
그러면 필터링된 목록을 로컬 범위 전체에서 사용할 수 있는 새 변수에 할당할 수 있습니다.이를 통해 필터링된 목록의 길이를 ng-show에 전달할 수 있습니다.
<body ng-app>
<div ng-controller="Ctrl">
<div class="daily"
ng-repeat="daily in dailies | orderBy:'-date' "
ng-show="filteredEntries.length"
>
{{ daily.date | date:'dd/MM/y' }}
<div class="entry"
ng-repeat="entry in filteredEntries = (daily.entries | filter:{ category: 'B'})"
>
<span>{{ entry.category }}</span>, <span>{{ entry.note }}</span>
</div>
</div>
</div>
</body>
그나저나, 좋은 질문이야!
언급URL : https://stackoverflow.com/questions/17514272/filtering-an-ng-repeat-list-based-on-a-sub-object-property
반응형
'source' 카테고리의 다른 글
| 경고:비부울 Atribute에 대해 false를 수신했습니다.커스텀 부울 속성의 부울을 전달하려면 어떻게 해야 합니까? (0) | 2023.03.08 |
|---|---|
| Oracle SQL Developer - 그리드가 없는 쿼리 결과 창 (0) | 2023.03.08 |
| Chrome에서의 감시 요청 (0) | 2023.03.08 |
| Facebook-WordPress 댓글/피드백 통합 (0) | 2023.03.08 |
| 날짜를 기준으로 쿼리를 반환하다 (0) | 2023.03.08 |