AngularJS ng-checked指令

前端之家收集整理的这篇文章主要介绍了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" />
            男
        </label>
        <label>
            <input type="radio" value="女" name="sex" ng-model="value1" ng-checked="!sex" />
            女
        </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>
原文链接:https://www.f2er.com/angularjs/148849.html

猜你在找的Angularjs相关文章