Angular——控制改变checkbox的状态

最新推荐文章于 2021-03-24 11:09:15 发布

百草icon

最新推荐文章于 2021-03-24 11:09:15 发布

阅读量5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： angularJs 文章标签： angular checkbox

本文链接：https://blog.youkuaiyun.com/qq_42314621/article/details/88396034

angularJs 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了在Angular中如何控制复选框的全选、反选和全不选功能。通过使用ng-checked指令，可以设置复选框的选中状态，当ng-checked为false时复选框未选中，为true时选中。此外，也可以使用ng-model实现相同功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这段时间在学习angular，做练习的时候想做一个对几个复选框的全选、反选和全不选的控制。
本来以为是通过控制属性checked，但是查了资料发现属性checked不需要值，只要有这个属性就是表示选中状态，所以不能通过控制这个属性，然后angular有自己的指令ng-checked，这个属性为false时表示未选中，为true时为选中，所以可以通过这个属性来控制，代码如下：

html:

  <section ng-controller="tab-test-controller">
    <button ng-click="okClick()">全选</button>
    <button ng-click="reverseClick()">反选</button>
    <button ng-click="noClick()">全不选</button>
    <hr>
    <hr>
    <div ng-repeat="inp in checkList">
        {{inp.name}}: <input type="checkbox" ng-checked="inp.checked">
    </div>
</section>

js:

$scope.checkList = [{
        name:'呜呜',
        checked:'false'
    },{
        name:'哇哇',
        checked:'false'
    },{
        name:'嘻嘻',
        checked:'false'
    },{
        name:'哈哈',
        checked:'false'
    }];
//全选
$scope.okClick = function(){
    $scope.checkList.map(n => {
        n.checked = true;
    });
};

//全不选
$scope.noClick = function(){
    $scope.checkList.map(n => {
        n.checked = false;
    });
};

//反选
$scope.reverseClick = function(){
    $scope.checkList.map(n => {
        n.checked = !n.checked;
    });
}

也可以通过ng-model指令，只要将ng-checked改为ng-model就可以了。