Question

我有多个使用自定义过滤器的ng-repeat，我想隐藏列表。每个列表都有自己的someScopeValue值，用于确定是否应包含（或过滤掉）重复的项目。

我的第一次尝试不起作用，而且很清楚为什么不这样做（项目仅在ng-repeat中过滤而ng-show对此不了解：

<!-- this is clearly not smart logic -->
<ul ng-show="items.length">
    <li ng-repeat="item in items | customFilter:someScopeValue">text</li>
</ul>
...
<ul ng-show="items.length">
    <li ng-repeat="item in items | customFilter:someScopeValue">text</li>
</ul>

有没有办法将过滤器应用于ng-show？以下是我的一些想法，但好奇是否有最好的做法或更聪明的方法：

<!-- this would filter the list somewhere in each <ul> scope -->
<ul ng-show="filteredList.length">
    <li ng-repeat="item in filteredList">text</li>
</ul>

或者，也许我可以更智能地使用ng-init？

<!-- this filters the list on-the-fly for each <ul> using some scope function -->
<ul ng-init="filteredList = filter(items, someScopeValue)" ng-show="filteredList.length">
    <li ng-repeat="item in filteredList">text</li>
</ul>

Answer 1

您可以在范围上创建一个新变量，它将是过滤后的数组，如下所示：

<ul ng-show="filteredItems.length">
  <li ng-repeat="item in items | filter:someScopeValue as filteredItems">{{item.value}}</li>
  <li>Extra</li>
</ul>

在执行此类操作时，您将创建$scope.filteredItems。

JSFIDDLE

Answer 2

如果在排序数据后没有更改数据，则可以先在控制器内操作数组。然后使用你的第一个建议ng-show =“filteredList.length”。

Answer 3

这是我提出问题的路线。我在一个由过滤器修改的范围内的列表上设置了一个监视器，并将该显示基于另一个持有该长度的变量。这是一个例子fiddle。

  $scope.counter = $scope.items.length;

  $scope.$watch("items.length", function(newValue, oldValue) { 
    $scope.counter = newValue;
  });

Answer 4

是的，您可以使用ng-init或引入variable in the template。但我建议过滤控制器内的数据，并将过滤后的数组暴露给模板。特别是如果你必须隐藏parrent <ul>元素。

过滤后的数组为空时的角度隐藏

4 个答案: