javascript - AngularJS:根据隐藏子项的数量隐藏父项

Question

我有以下代码:

<div ng-hide="items.length == 0">
    <li ng-repeat="item in items" ng-hide="item.hide == true">
        {{ item.name }} <hide-button />
    </li>
</div>

假设我有 10 件元素。当我单击按钮时，我将 item.hide 设置为 true 并且项目消失。当我隐藏所有 10 个项目时，我想隐藏主要的 div。使用 AngularJS 实现此目的的最佳方法是什么？

Answer 1

一种方法可能是使用这样的函数:

$scope.checkItems = function () {
    var total = $scope.items.length;
    for (var i = 0; i < $scope.items.length; ++i) {
        if ($scope.items[i].hide) total--;
    }
    return total === 0;
};

并更改外部 div 上的 ngHide 属性:

ng-hide="checkItems()"

jsfiddle:http://jsfiddle.net/u6vkf6bt/

另一种方法是声明一个 $scope.allHidden 变量并像这样监视数组:

$scope.$watch('items', function (newItems) {
    var all = true;
    for (var i = 0; i < newItems.length; ++i) {
        if (newItems[i].hide !== true) all = false;
    }
    $scope.allHidden = all;
}, true);

这是检查数组中的任何内容何时更改，并检查是否所有隐藏属性都设置为 true。

然后在ngHide属性上设置:

ng-hide="allHidden"

jsfiddle:http://jsfiddle.net/u6vkf6bt/1/

在这两种方法中，我会选择第一种方法，因为深度观察可能会导致性能问题:

This therefore means that watching complex objects will have adverse memory and performance implications.

来自 here ，在 $watch(watchExpression, listener, [objectEquality]); 下，当 objectEquality 设置为 true 时。