Question

我有以下HTML

<input type="checkbox" id="cbxSelectAllPreventive"/> <label>Select All</label>
    <ul style="list-style: none;">
       <li ng-repeat="test in lists.Tests">
       </li>
    </ul>

Test是具有isSelected属性的复杂对象数组。我想使用复选框作为SelectAll功能。为此，我需要向复选框提供ng-model，我可以将其作为检查每个测试并返回true / false的方法提供。有没有办法在没有编写方法的情况下进行内联操作？

Answer 1

我只看到使用ng-change

上的函数的方法

 <input type="checkbox" id="cbxSelectAllPreventive" 
      ng-model="checked" ng-change="setAll(checked)"/>
...
$scope.setAll = function(isSelected){
    $scope.lists.Tests.map(function(el){
        el.isSelected = isSelected;
    })
}

工作fiddle

编辑：

用于项目之间的完整双向连接＆＃39;选择和复选框代码会有点复杂。

我们将在$scope中使用额外的变量来反映复选框的标签。不要忘记在控制器创建时初始化变量

<label for="cbxSelectAllPreventive">{{selectLabel}}</label>
...
$scope.selectLabel = 'Select All';

setAll函数应该注意设置这个变量。

$scope.setAll = function(isSelected){
    $scope.selectLabel = isSelected ? 'Deselect All' : 'Select All';
    $scope.lists.Tests.map(function(el){
        el.isSelected = isSelected;
    })
}

最后，您肯定可以选择/取消选择单个项目。在这种情况下，您必须$watch您的列表。注意第三个参数true进行深度比较，否则它会赢得＆＃t;＃34;注意＆＃34;对象内部的变化。

$scope.$watch('lists.Tests', function(){
    var text = $scope.lists.Tests.map(function(el){ return el.isSelected; }).join();
    console.log(text);
    var allSelected = $scope.lists.Tests.every(function(el){ return el.isSelected;});
    var noneSelected = $scope.lists.Tests.every(function(el){ return !el.isSelected;});
    if(noneSelected){
        $scope.selectLabel = 'Select All';
        $scope.checked = false;
    }else if(allSelected){
        $scope.selectLabel = 'Deselect All';
        $scope.checked = true;
    }
    if(!noneSelected && !allSelected) {
       $scope.selectLabel = 'Undetermined'; 
// here set the check box to undetermined (third) state
    }
}, true);

Updated fiddle

Answer 2

您是否尝试ng-checkbox应该做什么

在Angular中使用AND运算符

2 个答案: