angular中的input[checkbox]

最新推荐文章于 2021-03-23 15:15:27 发布

yzbben

最新推荐文章于 2021-03-23 15:15:27 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： angularjs

本文链接：https://blog.youkuaiyun.com/yzbben/article/details/53738822

angularjs 专栏收录该内容

45 篇文章

订阅专栏

本文详细介绍了 Angular 框架中用于创建复选框的 `input[checkbox]` 元素，包括其关键属性的用法，并通过实例展示了如何在模板中正确配置和操作复选框。

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

属性：

参数名称	参数类型	描述
ngModel	string	绑定的数据
name (optional)	string	名称
ngTrueValue (optional)	expression	选中的值
ngFalseValue (optional)	expression	未选中的值
ngChange (optional)	string	值改变时触发事件

例子：

效果演示

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="checkboxExample">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>input[checkbox]例子</title>
        <script src="../angular-1.3.0.14/angular.js"></script>
        <script type="text/javascript">
        angular.module('checkboxExample', [])
        .controller('ExampleController', ['$scope', function ($scope) {
        $scope.value1 = true;
        $scope.value2 = 'YES'
        }]);
        </script>
</head>
<body>
        <form name="myForm" ng-controller="ExampleController">
        Value1: <input type="checkbox" ng-model="value1"> <br />
        Value2: <input type="checkbox" ng-model="value2"
        ng-true-value="'YES'" ng-false-value="'NO'"> <br />
        <tt>value1 = {{value1}}</tt><br />
        <tt>value2 = {{value2}}</tt><br />
        </form>
</body>
</html>

效果：