脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → AngularJS单选框及多选框实现双向动态绑定

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

 更新时间：2016年01月13日 16:11:07   作者：奋飛  
这篇文章主要为大家详细介绍了AngularJS单选框及多选框实现双向动态绑定的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

一、ng-model

ng-model指令用来将input、select、textarea或自定义表单控件同包含它们的作用域中的属性进行绑定。它将当前作用域中运算表达式的值同给定的元素进行绑定。如果属性不存在，它会隐式创建并将其添加到当前作用域中。
始终用ng-model来绑定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" />篮球

四、完整示例

<html ng-app="myApp">
<head>
 <meta charset="UTF-8">
 <title>radio & checkbox</title>
 <script type="text/javascript" src="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>

以上就是关于AngularJS单选框及多选框实现双向动态绑定的相关介绍，希望对大家的学习有所帮助。

您可能感兴趣的文章:

相关文章

  • angularjs2 ng2 密码隐藏显示的实例代码

    angularjs2 ng2 密码隐藏显示的实例代码

    本篇文章主要介绍了angularjs2 ng2 密码隐藏显示的实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-08-08
  • Angular7实现拖放Drag Drop示例详解

    Angular7实现拖放Drag Drop示例详解

    这篇文章主要介绍了Angular7实现拖放Drag Drop示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-12-12
  • 浅析Angular 实现一个repeat指令的方法

    浅析Angular 实现一个repeat指令的方法

    这篇文章主要介绍了Angular 实现一个repeat指令的方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • angularjs手动识别字符串中的换行符方法

    angularjs手动识别字符串中的换行符方法

    今天小编就为大家分享一篇angularjs手动识别字符串中的换行符方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • 深入理解Angular.JS中的Scope继承

    深入理解Angular.JS中的Scope继承

    这篇文章主要给大家深入的介绍了关于Angular.JS中Scope继承的相关资料，Angular。JS中scope之间的继承关系使用JavaScript的原型继承方式实现，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-06-06
  • angular中两种表单的区别(响应式和模板驱动表单)

    angular中两种表单的区别(响应式和模板驱动表单)

    这篇文章主要介绍了angular中两种表单的区别(响应式和模板驱动表单)，详细的介绍了这两种表单的实现以及区别，非常具有实用价值，需要的朋友可以参考下
    2018-12-12
  • AngularJS学习笔记（三）数据双向绑定的简单实例

    AngularJS学习笔记（三）数据双向绑定的简单实例

    这篇文章主要介绍了AngularJS学习笔记（三）数据双向绑定的简单实例，详解数据双向绑定实例的相关资料,需要的朋友可以参考下。
    2016-11-11
  • Angular中sweetalert弹框的基本使用教程

    Angular中sweetalert弹框的基本使用教程

    这篇文章主要给大家介绍了关于Angular中sweetalert弹框的基本使用的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-07-07
  • 详解AngularJs ui-router 路由的简单介绍

    详解AngularJs ui-router 路由的简单介绍

    本篇文章主要介绍了AngularJs ui-router 路由的简单介绍。简单明了的说明了ngRoute和ui-router的区别和用法，有兴趣的可以了解一下
    2017-04-04
  • Angularjs实现mvvm式的选项卡示例代码

    Angularjs实现mvvm式的选项卡示例代码

    每位Web开发者应该都知道，选项卡是现代web网页中最常用的效果之一，所以本文重点是用angularjs这个非常火mvvm框架，实现选项卡效果。有需要的朋友们可以参考借鉴，下面来一起看看吧。
    2016-09-09

最新评论