중첩 된 NG-REPET이 비어 있지 않으면 요소 만 표시합니까?
https://stackoverflow.com//questions/20002481
-
20-12-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
나는 중첩 된 ng-repeat로 생성 된 목록 목록을 가지고 있습니다.각 외부 NG- 반복에는 내부 목록의 레이블이있는 DIV (예 : "그룹 A")를 포함합니다.이제는 필터링으로 인해 내부 목록이 비어 있으면이 레이블을 표시하는 방법을 만들려고합니다 (입력 검색 텍스트에서 적용됨)
여기에 내 문제와 나의 시도 된 솔루션을 설명하는 플러스가 있습니다. plnkr
isGroupEmpty와 같은 '무거운'기능을 갖는 것은 매우 더 간단한 패션으로이를 수행 할 수있는 방법이 있습니까?나는 내부 Ng-Repeat 내부의 레이블을 움직이는 아이디어로 충실하고 있지만 ng-show="$first"를 사용하지만 멋지게 보이지 않습니다
해결책
나는 완벽하게 일하는 다음 해결책으로 끝났다. plnkr
내부 Ng-Repeat에서 변수를 설정 하여이 변수 길이에 따라 NG-Show를 평가할 수있었습니다.
<input ng-model='searchText'/>
<span ng-show='filtered.length > 0'>
<ul>
<li ng-repeat='el in filtered = (model | filter:searchText)'>
<div>{{el.label}}</div>
</li>
</ul>
</span>
다른 팁
ng-init를 활용할 수 있으므로 필터를 한 번만 호출합니다.
<div ng-repeat='(key,group) in model'>
<div ng-init="filtered = (group | filter:filterFn)"></div>
<div ng-show="filtered.length !== 0">
<div>{{key}}</div>
<ul>
<li ng-repeat="el in filtered">
<div>{{el.label}}</div>
</li>
</ul>
</div>
</div>
일반적으로 ng-init를 사용하지 않는 것이 좋습니다.하지만 필터를 두 번 부르는 것 같습니다.
또 다른 방법은 JavaScript를 통해 필터를 사용하는 것입니다. 컨트롤러에서 $ 필터를 삽입하고 '필터'$filter('filter')를 검색하여 그룹으로 첫 번째 인수로서의 그룹으로 호출하고, 필터링이 두 번째로 호출하고 결과를 범위에 저장합니다.
나는 다음을 사용했다 :
<ul>
<li ng-repeat="menuItem in menuItems"><a href="Javascript:void(0);"><span class="fa {{menuItem.icon}} fa-lg"></span>{{menuItem.itemName}}</a>
<span ng-show='menuItem.subItems.length > 0'>
<ul>
<li ng-repeat="subItem in menuItem.subItems"><a href="Javascript:void(0);">{{subItem.itemName}}</a></li>
</ul>
</span>
</li>
배열이 0의 길이가 있는지 확인하는 것은 값 비싼 작업이 아닙니다.항목이있는 목록 만 표시하려면 배열 배열을 취하는 외부 배열에 필터를 넣고 0과 다른 길이가있는 배열 만 반환합니다.
배열이== false이면 내부 div를 숨길 수도 있습니다.
Plunkr은 꽤 복잡해서 잡초가 쉽고 바이올린을 사용하여 원하는 것을 다시 만들었습니다.내 접근 방식의 일반적인 아이디어는 하위 배열이 아닌 배열에서 항목을 필터링하는 것입니다.텍스트가 변경되면 필터링 된 항목 만 수행하십시오.그래서 여기 마크 업이 있습니다 :
<div ng-app="app">
<div ng-controller="ParentCtrl">
<input data-ng-model="filterText" data-ng-change="updateTypes()" />
<div data-ng-repeat="type in filteredTypes">
{{ type.name }}
<ul>
<li style="margin-left:20px;" data-ng-repeat="entry in type.entries">
- {{ entry.name }}
</li>
</ul>
</div>
</div>
</div>
여기에 코드가 있습니다.
angular.module('app', [])
function ParentCtrl($scope){
$scope.filterText = "";
$scope.types = [
{ name: "type1", entries: [{ name: "name1"}, { name: "name2"}, { name: "name3"}]},
{ name: "type2", entries: [{ name: "name1"}, { name: "name3"}, { name: "name3"}]},
{ name: "type3", entries: [{ name: "name1"}, { name: "name2"}, { name: "name5"}]},
{ name: "type4", entries: [{ name: "name4"}, { name: "name2"}, { name: "name3"}]}
];
$scope.filteredTypes = [];
$scope.updateTypes = function(){
$scope.filteredTypes.length = 0;
for(var x = 0; x < $scope.types.length; x++){
if($scope.filterText === ""){
$scope.filteredTypes.push($scope.types[x]);
}
else{
var entries = [];
for(var y = 0; y < $scope.types[x].entries.length; y++){
if($scope.types[x].entries[y].name.indexOf($scope.filterText) !== -1){
entries.push($scope.types[x].entries[y]);
}
}
if(entries.length > 0){
$scope.filteredTypes.push({
name: $scope.types[x].name,
entries: entries
});
}
}
}
}
$scope.updateTypes();
}
바이올린 : http://jsfiddle.net/2hrws/
새 배열을 만들고 결과를 제거하기 위해 실제 필터를 사용하지 않는 이유는 각도가 필터에서 즉시 동적 배열을 만드는 것을 좋아하지 않는다는 것입니다.이것은 $$ 해시 키를 할당하지 않기 때문에 더러운 점검을 할 때 올바르게 정확하게 정확하지 않습니다.이 문제에 대해이 주제에서 필요한 것을하는 방법에 대한 아이디어가 있습니다. https://groups.google.com/forum/#ight/angular/ieiqok-ykpu
아이디어는 간단합니다 - list-widget.html에 동일한 필터를 사용하십시오.
<div ng-show="group | filter:searchText">{{ key }}</div>
