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