Question

我在我的页面上使用ng-repeat。 ng-class工作得非常好。

  <div class="card news" ng-repeat="item in news track by $index" id="{{news.nid}}" ng-init="parentIndex = $index" ng-class="{hidden: '{{getCheck($index)}}' == 'true'}">
      ...

  </div>

现在我需要，如果隐藏了所有项目，则显示此div：

<h3 class="news-empty">No news</h3>

规则是什么？我该怎么做？感谢。

Answer 1

您需要另一种方法来检查是否所有元素都被隐藏：

$scope.everythingIsHidden = function() {
    return $scope.news.every((new, index) => $scope.getCheck(index));
}

$scope.getCheck = function(index) {  // Your getChek function that I suppose it checks if an element is hidden based on index
    //...
}

<h3 class="news-empty" ng-if="everythingIsHidden()">No news</h3>

Answer 2

TheCog的答案将起作用。如果你想以更“'角度'的方式做这件事，你将需要重构你拥有的东西。

你不应该试图用CSS类隐藏它们。 ngRepeats具有内置的过滤器语法。所以，你应该过滤掉它们。

<div class="card news" 
     ng-repeat="item in news | filterMethod as results track by $index" 
     id="{{news.nid}}" 
     ng-init="parentIndex = $index" 
 >
<h3 class="news-empty" ng-if="results.length === 0" >No news</h3>

重复中的as results语句将过滤后的数组存储在结果中。 filterMethod必须是angular filter，它可能与您的getCheck($index)方法类似。

Answer 3

您希望在h3标记中添加ngShow，并将其对准您在控制器中编写的函数，该函数检查数组是否为空，可能是通过迭代隐藏并运行getCheck的相同数组（ $ index）。

如果所有数组项都被隐藏，则显示AngularJS中的另一个div

3 个答案: