Question

我有这个小提琴： http://jsfiddle.net/j3ca/3kpoL6vg/3/

HTML：

<div ng-app>
<div ng-controller="MainCtrl">
    <div class="item" ng-repeat="item in items" ng-class="{'active': item.active}" ng-click="item.active = !item.active">{{ item.name }}</div>
<button ng-click="mark()" ng-class="{'marked': allMarked}">Mark all</button>
</div>

JS：

function MainCtrl($scope){
$scope.items = [
    { id: 1, name: 'Item 1', active: false },
    { id: 2, name: 'Item 2', active: false },
    { id: 3, name: 'Item 3', active: false },
    { id: 4, name: 'Item 4', active: false }
];

$scope.allMarked = false;
$scope.mark = function() {
    for(var i = 0; i < $scope.items.length; i++) {
        if($scope.allMarked) {
            $scope.items[i].active = false;
        } else {
            $scope.items[i].active = true;
        }
    }
    $scope.allMarked = !$scope.allMarked;

}

}

我有以下功能：

点击列表项目更改＆＃34;活动＆＃34;项目的属性，如果激活== true;
点击Mark all按钮将所有列表元素设置为＆＃34; active＆＃34;和改变按钮的颜色;

我想做的是：

如果我手动选择列表中的所有项目，该按钮也会更改颜色为绿色;
如果我点击Mark all按钮，但是我手动取消选中一项，按钮应该将其颜色改回红色（因为并非所有项目都被选中）;

基本上我需要的是：http://plnkr.co/edit/N98IKTcHoZMCs18FjSRF?p=preview 但不是复选框，我需要div。

我的想法是：每次点击一个链接，我检查（for循环）是否所有其他项都是活动的，但这似乎是很多不必要的循环:) 如果列表中的所有项目具有相同的某个属性值，是否有一种角度来确定（点击）？我是Angular的新手，非常感谢帮助：）

更新小提琴

我已经更新了我的小提琴链接，但这显然是一个可怕的糟糕解决方案:)任何想法？有没有办法在不点击每次点击的情况下检查项目的有效值？

Answer 1

一种选择是检查是否标记了所有项目。将allMarked更改为与此类似的内容：

$scope.allMarked = function () {
    return $scope.items.every(function (item) {
        return item.active;
    });
};

可以看到一个例子here。

AngularJS：当列表中的所有项具有相同的值时，将类添加到元素

1 个答案: