找出嵌套的ng-repeat是否显示任何内容

Question

我有一个嵌套ng-repeat的情况，我需要弄清楚内部ng-repeat是否确实显示任何内容，或者是否没有显示任何内容。如果未显示任何内容，则显示一条消息，指出没有要显示的内容：

<div ng-repeat="area in $ctrl.specTplAreas">
    <div ng-repeat="item in $ctrl.items track by $index" 
       ng-if="item.specTemplateGroupId === area.id">displaying an item</div>
    <div ng-if="inner div above had no items to display">There are no items to display</div>
</div>

如何跟踪嵌套ng-repeat是否显示任何内容？

Answer 1

在控制器中筛选出不匹配的项目

$scope.items = $scope.items.filter(function (item) {
    return $scope.specTplAreas.find(function (area) {
        return area.id == item.specTemplateGroupId;
    })
});

现在在items中，您将只有要显示的项目

<div ng-repeat="item in $ctrl.items track by $index>
        Items are there
</div>
<div ng-hide="$ctrl.items.length"> Items are not there</div>

Answer 2

<div ng-repeat="area in $ctrl.specTplAreas"
    <div ng-repeat="item in $ctrl.items track by $index>
       <div ng-if="item.specTemplateGroupId === area.id"> Items are there</div>
       <div ng-if="item.specTemplateGroupId !== area.id"> Items are not there</div>
    </div>
</div>