专栏首页Super 前端AngularJS单选框及多选框实现双向动态绑定

AngularJS单选框及多选框实现双向动态绑定

在AngularJS中提及双向数据绑定,大家肯定会想到ng-model指令。

一、ng-model

ng-model指令用来将input、select、textarea或自定义表单控件同包含它们的作用域中的属性进行绑定。它将当前作用域中运算表达式的值同给定的元素进行绑定。如果属性不存在,它会隐式创建并将其添加到当前作用域中。 始终用ng-model来绑定scope上一个数据模型内的属性,而不是scope上一个数据模型内的属性,而不是scope上的属性,这可以避免在作用域或后代作用域中发生属性覆盖!

<input type="text" ng-model="modelName.somePrototype" />

二、type=”radio”

通过 value 属性指定选中状态下对应的值,并通过 ng-model 将单选框与 $scope 中的属性对应,便实现了 type=”radio” 时的双向动态绑定。

<input type="radio" name="sex" value="male" ng-model="person.sex" />男
<input type="radio" name="sex" value="female" ng-model="person.sex" />女

三、type=”checkbox”

通过AngularJS 的内置指令 ng-true-value 和 ng-false-value ,指定多选框在选中和未选中状态下对应的值,再通过ng-model 将其与 $scope 中的属性对应,便实现了type=”checkbox” 的双向动态绑定。

<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.pingpong" />乒乓球
<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.football" />足球
<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.basketball" />篮球

四、完整示例

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>radio & checkbox</title>
    <script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.4.4/angular.min.js"></script>
</head>
<body>
    <input type="radio" name="sex" value="male" ng-model="person.sex" />男
    <input type="radio" name="sex" value="female" ng-model="person.sex" />女
    <input type="text" ng-model="person.sex" />

    <input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.pingpong" />乒乓球
    <input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.football" />足球
    <input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.basketball" />篮球
    <span>{{ person.like.pingpong }} {{ person.like.football }} {{ person.like.basketball }} </span>
</body>
</html>

<script type="text/javascript">
    var app = angular.module('myApp', []);
    app.run(function($rootScope) {
        $rootScope.person = {
            sex: "female",
            like: {
                pingpong: true,
                football: true,
                basketball: false
            }
        };
    });
</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 浮动、定位

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    奋飛
  • 解释型语言-shell

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    奋飛
  • Log4j日志集中管理

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    奋飛
  • HTML5复习整理

    一、推出的目标 web浏览器兼容性低;文档结构不明确;web应用程序的功能受限 二、语法的改变 内容类型(html或htm);DOCTYPE声明简化;指定字符编...

    小古哥
  • 游戏AI-实现AI角色的自主移动——操控行为

    这个类直译为“交通工具”包括了很宽泛的能自主移动的AI角色。 操作对象抽象为一个质点,包含位置信息、质量、速度等,速度随着施加力的变化而变化。力与速度都有一个...

    祝你万事顺利
  • C++奇淫巧技之SFINAE

    SFINAE 技术,即匹配失败不是错误,英文Substitution Failure Is Not An Error,其作用是当我们在进行模板特化的时候,会去选...

    zhuanxu
  • List、Map、Set三个接口存取元素时,各有什么特点?

    List以特定索引来存取元素,可以有重复元素。Set不能存放重复元素(用对象的equals()方法来区分元素是否重复)。Map保存键值对(key-value p...

    唐怀瑟
  • 感谢乐享的客户们,这个寒冬有点暖!

    除夕前夜,乐享团队基本放弃了春节假期,积极加入到防疫攻坚战中。我们免费上线乐享直播小程序,助力各企业/学校/医院等大型组织进行远程培训、健康报备、信息发布等。...

    腾讯乐享
  • 拓扑数据分析与机器学习的相互促进

    用户1737318
  • Centos crontab定时任务

    CRONTAB是一个用于设置周期性被执行的任务的工具,有了它,我们就可以从定时工作中解放出来。

    用户1214487

扫码关注云+社区

领取腾讯云代金券