필터링 된 목록이 비어있을 때 div를 표시하는 방법 (ng-if를 사용하여 ng-repeat를 사용하여 필터링)

Question

ng-repeat를 사용하여 div가 있고 ng-if ...로 필터링됩니다. 목록 필터가 객체를 반환하지 않을 때 div로 나타나게하려면 어떻게해야합니까 ??

내가 메시지와 함께 사업부를 표시 할

<div class="item listItem active" ng-repeat="u in users | filter: inputFilter" ng-if="u.reports.length>0"> 
    Name: {{u.name}} 
    Reports: {{u.reports.length}} 
</div> 

이 사업부는 "우리는 아직보고 된 사용자가 필요 없다!" 때로는 사용자에게 보고서가 없으므로이 div를 보여줄 필요가 있습니다.

PS * 검색을 사용했습니다 ..!

------------ 편집 : 질문 ------------ 개선

임 목록 목록을 표시합니다 inputFilter를 사용하지 모든 사용자가 users에로드됩니다하지만 난 ng-if="u.reports.length>0"

같은 "사용자"를 사용하여 u.reports 내부 보고서 목록을 가진 사용자 만 표시됩니다 목록 다른 사업부에서 사용되는, 그래서 난 그냥 보여주는 모든 PS의 * 목록을 필터링하지 못할 보고 된 사용자.

------------ 나는 모든 반복에 의해 증가, 카운터를 설정하는 VAR를 생성 감소했다 IMPLEMENTED 솔루션 ------------

목록에서 항목을 제거 할 때마다

Answer 1

정확하게 이해하면 목록의 모든 사용자가 이 아니고 개의 보고서가있는 상태를 감지 한 다음 메시지를 표시하고 싶습니다. 그렇다면 ng-if 및 ng-show에 제한적인 표현 지원이 있으므로 컨트롤러의 기능에 의존해야 할 것이라고 생각합니다. 다음은 사용자 중 하나라도 보고서가있는 경우 true을 반환하고 모든 사용자가 보고서가없는 경우 false을 반환하는 간단한 함수를 작성하는 방법의 예입니다. 그런 다음 ng-if의 기능을 사용하여 메시지를 표시하거나 숨길 수 있습니다. 사용자에게 보고서를 전송하는 버튼을 추가하여 코드가 적절하게 메시지를 적절하게 표시하고 숨기고 있는지 확인할 수 있습니다.

angular.module('app', []) 
 
    .controller('ctrl', function($scope, $filter) { 
 
    $scope.users = [{ 
 
     name: 'Adam', 
 
     reports: [] 
 
    }, { 
 
     name: 'Alan', 
 
     reports: [] 
 
    }, { 
 
     name: 'Allen', 
 
     reports: [] 
 
    }, { 
 
     name: 'Amy', 
 
     reports: [] 
 
    }, { 
 
     name: 'Andrea', 
 
     reports: [] 
 
    }]; 
 

 
    $scope.noUsersWithReports = function() { 
 
     var usersWithReports = $filter('filter')($scope.users, { 
 
     reports: [] 
 
     }); 
 
     return usersWithReports.length === 0; 
 
    } 
 

 
    $scope.reportUser = function(user) { 
 
     $scope.users[$scope.users.indexOf(user)].reports.push({ 
 
     name: 'Fake Report' 
 
     }); 
 
    } 
 
    
 
    $scope.clearReports = function() { 
 
     angular.forEach($scope.users, function(user) { 
 
     user.reports = []; 
 
     }); 
 
    } 
 
    });

div { 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
    <div> 
 
    <button ng-repeat="u in users" ng-click="reportUser(u)">Report {{u.name}}</button> 
 
    <button ng-click="clearReports()">Clear All Reports</button> 
 
    </div> 
 
    <div> 
 
    Filter: 
 
    <input type="text" ng-model="listFilter"> 
 
    </div> 
 
    <div ng-repeat="u in users | filter: listFilter as filteredList" ng-if="u.reports.length > 0"> 
 
    Name: {{u.name}} 
 
    <br/>Reports: {{u.reports.length}} 
 
    </div> 
 
    <div ng-if="noUsersWithReports()"> 
 
    We don't have reported users yet! 
 
    </div> 
 
</div>

Answer 2

usersFiltered 목록을 추가하려고이 하나

<div class="item listItem active" ng-repeat="u in usersFiltered = (users | filter: inputFilter)" ng-if="usersFiltered.length>0"> 
Name: {{u.name}} 
Reports: {{u.reports.length}} 

Answer 3

간단히 할 수있는 다음 필터링 된 목록이있을 것이다 NG 반복의 새로운 매개 변수를 설정 당신의 목적을 위해 그 목록을 확인하십시오!

<div class="item listItem active" ng-repeat="u in filteredUsers =(users| filter:query) " ng-hide="u.reports.length>0"> 
     Name: {{u.name}} 
     Reports: {{u.reports.length}} 
</div> 


<div ng-if="filterdedUsres.length === 0"> 
No user found 
</div>