AngularJS ng-checked指令

来源:互联网 发布:应用程序端口号 编辑:程序博客网 时间:2024/06/05 11:31

定义和用法

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绑定数字类型问题

0 0