AngularJS ng-checked指令

定义和用法

ng-checked 指令用于设置复选框(checkbox)或单选按钮(radio)的 checked 属性。

如果 ng-checked 属性返回 true，复选框(checkbox)或单选按钮(radio)将会被选中。

语法

< input  type= "checkbox|radio"  ng-checked= "expression" > < /input >

type 为 checkbox 或 radio 的 <input> 元素支持。

---

参数值

值	描述
expression	如果返回 true，将会选中元素选项。

简单实例：

JS代码

var app = angular.module('myApp', []);
app.controller('validateCtrl', function ($scope) {
    $scope.sex = true;
    $scope.agree = true;
    $scope.clickOne = function () {
        $scope.sex = !$scope.sex;
        $scope.agree = !$scope.agree;
    }
});

HTMl代码

    <h3>Radio 控件测试</h3>
    <p>
        <label>
            <input type="radio" value="男" name="sex" ng-model="value1" ng-checked="sex==true" />
            男
        </label>
        <label>
            <input type="radio" value="女" name="sex" ng-model="value1" ng-checked="sex==false" />
            女
        </label>
        <button class="btn btn-default" ng-click="clickOne();">修改</button>
    </p>
    <h3>checked 控件测试</h3>
    <p>
        <div class="checkbox">
            <label>
                <input name="agree" type="checkbox" value="同意" ng-model="value2" ng-checked="agree" />
                同意协议
            </label>
        </div>
        <div class="checkbox">
            <label>
                <input name="agree" type="checkbox" value="同意2" ng-model="value2" ng-checked="agree" />
                同意协议2
            </label>
        </div>
    </p>

特别说明：

对于radio的绑定，主要指定属性==true,也就是

<input id='sex'  name="sex"  type="radio" ng-model='sex' ng-checked="sex==true">男

而不是单纯的指定属性，如果单纯指定属性不返回属性的值

<input id='sex'  name="sex"  type="radio" ng-model='sex' ng-checked="sex">男

更多参考：

AngularJS ng-checked指令

AngularJs ng-options

AngularJs checkbox绑定

AngularJs select绑定数字类型问题