Question

我有这样一个不确定的复选框：

它有效，但它使用 $ watch 。

scope.$watch(childList, function(newValue) {
            var hasChecked = false;
            var hasUnchecked = false;

            // Loop through the children
            angular.forEach(newValue, function(child) {
                if (child[property]) {
                    hasChecked = true;
                } else {
                    hasUnchecked = true;
                }
            });

            // Determine which state to put the checkbox in
            if (hasChecked && hasUnchecked) {
                element.prop('checked', false);
                element.prop('indeterminate', true);
                if (modelCtrl) {
                    modelCtrl.$setViewValue(false);
                }
            } else {
                element.prop('checked', hasChecked);
                element.prop('indeterminate', false);
                if (modelCtrl) {
                    modelCtrl.$setViewValue(hasChecked);
                }
            }
        }, true);

如果我在 ng-repeat中创建此复选框，则会减慢用户界面。是否可以重写这部分代码，不使用$ watch ？感谢任何帮助。

Answer 1

没有indeterminateCheckbox指令怎么样？

删除该指令，然后将ng-change方法添加到您的第二级（水果）checkbox，以确保所有项目都被选中或不像

<input type="checkbox" ng-change="checkAllEaten(person.name)" data-ng-model="fruit.eaten">

在你的控制器中

$scope.checkAllEaten = function (name) {
    var person = $scope.model.people.filter(function(p){
        return p.name === name;
    })[0];

    var result = person.fruits.reduce(function (p, c) {
        if (!p) return false;
        return c.eaten && true || false;
    }, true);

    person.allEaten = result;        
};

//initialization
$scope.model.people.forEach(function(item){
    $scope.checkAllEaten(item.name);
});

更新了fiddle

Angularjs不确定复选框慢

1 个答案: