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);

这是检查数组中的任何内容何时更改,并检查是否所有hide属性都设置为true.

然后在ngHide属性上设置它:

ng-hide="allHidden"

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

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

因此,这意味着观看复杂对象将产生不利的记忆和性能影响.

从这里开始,$watch(watchExpression, listener, [objectEquality]);当objectEquality设置为true时.