如何检查是否在Angular中选中了任何Checkbox

Question

是否有任何功能或NG- 的东西,以检查是否有任何显示的复选框的检查？

我通过ng-click ="function()"获取值并传递值.如果里面有任何值,我可以步行去检查我的数组.

如果选中任何复选框,我想激活/取消激活"下一步"按钮.

什么是最简单的方法？

Answer 1

如果您不想使用观察者,可以执行以下操作:

<input type='checkbox' ng-init='checkStatus=false' ng-model='checkStatus' ng-click='doIfChecked(checkStatus)'>

Answer 2

你可以这样做:

function ChckbxsCtrl($scope, $filter) {
    $scope.chkbxs = [{
        label: "Led Zeppelin",
        val: false
    }, {
        label: "Electric Light Orchestra",
        val: false
    }, {
        label: "Mark Almond",
        val: false
    }];

    $scope.$watch("chkbxs", function(n, o) {
        var trues = $filter("filter")(n, {
            val: true
        });
        $scope.flag = trues.length;
    }, true);
}

还有一个模板:

<div ng-controller="ChckbxsCtrl">
    <div ng-repeat="chk in chkbxs">
        <input type="checkbox" ng-model="chk.val" />
        <label>{{chk.label}}</label>
    </div>
    <div ng-show="flag">I'm ON when band choosed</div>
</div>

工作:http://jsfiddle.net/cherniv/JBwmA/

更新:或者你可以采用不同的方式,不使用$scope的$watch()方法,如:

$scope.bandChoosed = function() {
    var trues = $filter("filter")($scope.chkbxs, {
        val: true
    });
    return trues.length;
}

在模板中做:

<div ng-show="bandChoosed()">I'm ON when band choosed</div>

小提琴:http://jsfiddle.net/uzs4sgnp/

Answer 3

如果您只有一个复选框,则只需使用ng-model即可轻松完成此操作:

<input type="checkbox" ng-model="checked"/>
<button ng-disabled="!checked"> Next </button>

并在Controller中初始化$ scope.checked(默认值= false).在官方文档不鼓励在这种情况下,采用NG-初始化的.

Answer 4

尝试考虑模型以及选中复选框时该模型会发生什么.

假设每个复选框都绑定到具有ng-model的模型上的字段,则只要单击一个复选框,就会更改模型上的属性:

<input type='checkbox' ng-model='fooSelected' />
<input type='checkbox' ng-model='baaSelected' />

并在控制器中:

$scope.fooSelected = false;
$scope.baaSelected = false;

下一个按钮应仅在某些情况下可用,因此将ng-disabled指令添加到按钮:

<button type='button' ng-disabled='nextButtonDisabled'></button>

现在,只有当fooSelected为true或baaSelected为true时,下一个按钮才可用,我们需要观察这些字段的任何更改,以确保下一个按钮可用:

$scope.$watch('[fooSelected,baaSelected]', function(){
    $scope.nextButtonDisabled = !$scope.fooSelected && !scope.baaSelected;
}, true );

以上假设只有少数复选框会影响下一个按钮的可用性,但可以很容易地将其更改为使用大量复选框并使用$ watchCollection来检查更改.