AngularJS单选框及多选框实现双向动态绑定
在AngularJS中提及双向数据绑定,大家肯定会想到ng-model指令。
一、ng-model
ng-model指令用来将input、select、textarea或自定义表单控件同包含它们的作用域中的属性进行绑定。它将当前作用域中运算表达式的值同给定的元素进行绑定。如果属性不存在,它会隐式创建并将其添加到当前作用域中。
始终用ng-model来绑定scope上一个数据模型内的属性,而不是scope上的属性,这可以避免在作用域或后代作用域中发生属性覆盖!
<inputtype="text"ng-model="modelName.somePrototype"/>
二、type=”radio”
通过value属性指定选中状态下对应的值,并通过ng-model将单选框与$scope中的属性对应,便实现了type=”radio”时的双向动态绑定。
<inputtype="radio"name="sex"value="male"ng-model="person.sex"/>男 <inputtype="radio"name="sex"value="female"ng-model="person.sex"/>女
三、type=”checkbox”
通过AngularJS的内置指令ng-true-value和ng-false-value,指定多选框在选中和未选中状态下对应的值,再通过ng-model将其与$scope中的属性对应,便实现了type=”checkbox”的双向动态绑定。
<inputtype="checkbox"ng-true-value="true"ng-false-value="false"ng-model="person.like.pingpong"/>乒乓球 <inputtype="checkbox"ng-true-value="true"ng-false-value="false"ng-model="person.like.football"/>足球 <inputtype="checkbox"ng-true-value="true"ng-false-value="false"ng-model="person.like.basketball"/>篮球
四、完整示例
<htmlng-app="myApp"> <head> <metacharset="UTF-8"> <title>radio&checkbox</title> <scripttype="text/javascript"src="angular.js/1.4.4/angular.min.js"></script> </head> <body> <inputtype="radio"name="sex"value="male"ng-model="person.sex"/>男 <inputtype="radio"name="sex"value="female"ng-model="person.sex"/>女 <inputtype="text"ng-model="person.sex"/> <inputtype="checkbox"ng-true-value="true"ng-false-value="false"ng-model="person.like.pingpong"/>乒乓球 <inputtype="checkbox"ng-true-value="true"ng-false-value="false"ng-model="person.like.football"/>足球 <inputtype="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> <scripttype="text/javascript"> varapp=angular.module('myApp',[]); app.run(function($rootScope){ $rootScope.person={ sex:"female", like:{ pingpong:true, football:true, basketball:false } }; }); </script>
以上就是关于AngularJS单选框及多选框实现双向动态绑定的相关介绍,希望对大家的学习有所帮助。