AngularJS单选框及多选框实现双向动态绑定  更新时间:2016年01月13日 16:11:07   作者:奋飛   这篇文章主要为大家详细介绍了AngularJS单选框及多选框实现双向动态绑定的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 在AngularJS中提及双向数据绑定,大家肯定会想到ng-model指令。 一、ng-model ng-model指令用来将input、select、textarea或自定义表单控件同包含它们的作用域中的属性进行绑定。它将当前作用域中运算表达式的值同给定的元素进行绑定。如果属性不存在,它会隐式创建并将其添加到当前作用域中。 始终用ng-model来绑定scope上一个数据模型内的属性,而不是scope上的属性,这可以避免在作用域或后代作用域中发生属性覆盖! 二、type=”radio” 通过 value 属性指定选中状态下对应的值,并通过 ng-model 将单选框与 $scope 中的属性对应,便实现了 type=”radio” 时的双向动态绑定。 男 女 三、type=”checkbox” 通过AngularJS 的内置指令 ng-true-value 和 ng-false-value ,指定多选框在选中和未选中状态下对应的值,再通过ng-model 将其与 $scope 中的属性对应,便实现了type=”checkbox” 的双向动态绑定。 乒乓球 足球 篮球 四、完整示例 radio & checkbox 男 女 乒乓球 足球 篮球 {{ person.like.pingpong }} {{ person.like.football }} {{ person.like.basketball }} 以上就是关于AngularJS单选框及多选框实现双向动态绑定的相关介绍,希望对大家的学习有所帮助。 您可能感兴趣的文章: ExtJS Grid使用SimpleStore、多选框的方法 JavaScript判断表单中多选框checkbox选中个数的方法 ExtJS 下拉多选框lovcombo javascript 单选框,多选框美化代码 用原生JS实现简单的多选框功能 兼容ie和firefox版本的js反选 全选 多选框 用 Javascript 验证表单(form)中多选框(checkbox)值 html+javascript+bootstrap实现层级多选框全层全选和多选功能 AngularJS 单选框及多选框的双向动态绑定 JS实现多选框的操作 AngularJS 单选框 多选框 动态绑定 相关文章 ionic3实战教程之随机布局瀑布流的实现方法 这篇文章主要给大家介绍了关于ionic3实战教程之随机布局瀑布流的实现方法,文中通过示例代码和图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。 2017-12-12 Angular Excel 导入与导出的实现代码 这篇文章主要介绍了Angular Excel 导入与导出的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2019-04-04 Ionic + Angular.js实现图片轮播的方法示例 图片轮播在我们日常开发中是再熟悉不过的了,下面这篇文章主要给大家介绍了Ionic + Angular实现图片轮播的方法,文中给出了详细的示例代码供大家参考学习,需要的朋友们下面来一起看看吧。 2017-05-05 AngularJS ionic手势事件的使用总结 本篇文章主要介绍了AngularJS手势事件的使用总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-08-08 举例详解AngularJS中ngShow和ngHide的使用方法 这篇文章主要介绍了举例详解AngularJS中ngShow和ngHide的使用方法,AngularJS是一款非常热门的JavaScript框架,需要的朋友可以参考下 2015-06-06 angular十大常见问题 本文主要介绍了angular十大常见问题,具有很好的参考价值。下面跟着小编一起来看下吧 2017-03-03 详解支持Angular 2的表格控件 本文主要对支持Angular2的表格控件进行详细介绍。具有一定的参考价值,下面跟着小编一起来看下吧 2017-01-01 Angular ng-class详解及实例代码 这篇文章主要介绍了Angular ng-class的知识,并整理了相关资料,有兴趣的小伙伴可以参考下 2016-09-09 Angular学习笔记之集成三方UI框架、控件的示例 这篇文章主要介绍了Angular学习笔记之集成三方UI框架、控件的示例,详细的介绍了Material UI、Ag-grid等框架,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2018-03-03 angular2使用简单介绍 Angular2开发者预览版出来已有一段时间,这个以速度与移动性能为目的的框架到底如何,今天我们来结合官网的demo尝试一下。 2016-03-03 最新评论

在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单选框及多选框实现双向动态绑定的相关介绍,希望对大家的学习有所帮助。

您可能感兴趣的文章:

  • ExtJS Grid使用SimpleStore、多选框的方法
  • JavaScript判断表单中多选框checkbox选中个数的方法
  • ExtJS 下拉多选框lovcombo
  • javascript 单选框,多选框美化代码
  • 用原生JS实现简单的多选框功能
  • 兼容ie和firefox版本的js反选 全选 多选框
  • 用 Javascript 验证表单(form)中多选框(checkbox)值
  • html+javascript+bootstrap实现层级多选框全层全选和多选功能
  • AngularJS 单选框及多选框的双向动态绑定
  • JS实现多选框的操作
张贴在3