네스트된 ng-repeat이 비어있지 않은 경우에만 요소를 표시하려면 어떻게 해야 합니까?

네스트된 ng-repeat이 비어있지 않은 경우에만 요소를 표시하려면 어떻게 해야 합니까?

네스트된 ng-repeat으로 작성된 리스트가 있습니다.각 외부 ng-repeat에는 내부 목록의 레이블이 있는 div(예: "그룹 A")가 포함됩니다.필터링으로 인해 내부 목록이 비어 있는 경우 이 레이블이 표시되지 않도록 하는 방법을 만들려고 합니다(입력 검색 텍스트로 적용됨).

여기 나의 문제와 내가 시도한 해결책을 설명하는 플런커가 있다: Plnkr

is Group Empty와 같은 '무거운' 기능이 있는 것은 매우 번거로운 일인 것 같습니다.좀 더 간단하게 할 수 있는 방법은 없을까요?라벨을 내부 ng-repeat 안쪽으로 옮겨서 그 안에 있는 라벨을ng-show="$first"근데 보기엔 별로야 돼

나는 다음과 같은 완벽한 해결책을 얻게 되었다.플라스틱

내부 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를 검색할 수 있습니다.$filter('filter')컨트롤러에서는 group을 첫 번째 인수로, filterFn을 두 번째 인수로 호출하여 결과를 스코프에 저장합니다.

다음을 사용했습니다.

<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인 경우에도 inner div를 숨길 수 있습니다.

http://plnkr.co/edit/gist:3510140

http://plnkr.co/edit/Gr5uPnRDbRfUYq0ILhmG?p=preview

당신의 펑크는 꽤 복잡하고 제거하기가 어려워서 바이올린을 사용해서 당신이 원하는 것을 재현했습니다.이 접근법의 기본 개념은 서브 배열이 아닌 배열에서 항목을 필터링하는 것입니다.그리고 텍스트가 변경될 때만 필터링된 항목을 수행합니다.가격인상은 다음과 같습니다.

<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/

새 어레이를 만들고 실제 필터를 사용하여 결과를 삭제하지 않는 이유는 Angular가 플라이인 필터로 동적 어레이를 만드는 것을 좋아하지 않기 때문입니다.이는 $$hashKey가 할당되지 않고 더티체크 시 올바르게 정렬되지 않기 때문입니다.https://groups.google.com/forum/#!topic/angular/IEIQok-YkpU와 같은 토픽에서 필요한 작업을 수행하는 방법에 대한 아이디어를 얻었습니다.

는 당신의 것을 입니다.list-widget.html동작 확인: plunkr

하세요. 동일한 필터를 사용하여ng-show:

<div ng-show="group | filter:searchText">{{ key }}</div>

라벨은 필터링되지 않은 항목이 있는 경우에만 표시됩니다.

에서는 「 」를 searchText제가 커피스크립트를 잘 모르기 때문에 필터 처리를 합니다.

언급URL : https://stackoverflow.com/questions/20002481/how-do-i-only-show-an-element-if-nested-ng-repeat-is-not-empty