Question

我正在创建一个ng-repeat：

<div class="items">
  <!-- WANT TO HIDE THIS ENTIRE AREA IF THERE IS NO VALID ITEMS -->
  <b>Items</b>
  <span ng-repeat="item in items | orderBy:'priority'" itemid="{{item.$id}}" ng-if="!item.groupID || item.groupID == 'misc'">
   {{item.title}}
  </span>
</div>

如您所见，我有一个ng-if，用于检查该项目是否包含null item.groupid或属于misc类别。

很多时候没有符合所有这些条件的项目，在这种情况下我想要隐藏外部div <div class="items">

我无法弄清楚如何隐藏它，因为我无法在循环的内部元素部分进行ng-show。

Answer 1

您可以使用过滤器，并将过滤器的结果分配给变量。使用该变量来决定是否应显示封闭的div。

此处a plunkr展示了它的运作方式：

<div ng-show="filteredItems.length > 0">
  Test
  <div ng-repeat="item in items | filter:hasGroupFilter(group) as filteredItems">
    {{ item.name }} - {{ item.group }}
  </div>
</div>

在控制器中：

$scope.hasGroupFilter = function(group) {
  return function(item) {
    return !item.group || item.group === group;
  };
};

Answer 2

我认为最简单的方法是预先过滤列表，并在父div.items上添加条件，而不是在ng-repeat的每个跨度中使用ng-if。

Here is a working plunker

您应该过滤控制器中的列表，只需在父div上添加条件

 <div class="items" ng-if="filteredItems.length">
   <b>Items</b>
   <span ng-repeat="item in filteredItems | orderBy:'priority'" itemid="{{item.$id}}">
    {{item.title}}
   </span>
 </div>

Answer 3

您可以创建一个可以访问外部作用域上的公共变量的函数。它看起来像是这样的：

在JS文件中

$scope.NoValidItems = true; //assume no valid items code also might look different based on how you format your angular
$scope.CheckItems = function(item){
var check = false;
    if(item.groupID && item.groupID !== 'misc'){
        check = true;
        $scope.NoValidItems = false;
    }else
      check = false;
    return check;
};

HTML

<div class="items" ng-if="!NoValidItems ">
<!-- WANT TO HIDE THIS ENTIRE AREA IF THERE IS NO VALID ITEMS -->
<b>Items</b>
<span ng-repeat="item in items | orderBy:'priority'" itemid="{{item.$id}}" ng-if="!CheckItems(item)">
   {{item.title}}
  </span>
</div>

这应该有效，if语句可能不准确，但你得到了漂移。几乎如果有一个有效它将显示，但如果没有有效的项目不显示。有效符合您的条件标准。希望这有帮助，我解释好了

ng-show if filter和inner if语句是否有效

3 个答案: