AngularJS单选框及多选框实现双向动态绑定
发布时间：2020-12-17 10:32:15 所属栏目：安全 来源：网络整理
导读：在AngularJS中提及双向数据绑定，大家肯定会想到ng-model指令。 一、ng-model ng-model指令用来将input、select、textarea或自定义表单控件同包含它们的作用域中的属性进行绑定。它将当前作用域中运算表达式的值同给定的元素进行绑定。如果属性不存在，它会
|
在AngularJS中提及双向数据绑定，大家肯定会想到ng-model指令。 一、ng-modelng-model指令用来将input、select、textarea或自定义表单控件同包含它们的作用域中的属性进行绑定。它将当前作用域中运算表达式的值同给定的元素进行绑定。如果属性不存在，它会隐式创建并将其添加到当前作用域中。 <inputtype="text"ng-model="modelName.somePrototype"/>1 二、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"/>女12 三、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"/>篮球123 四、完整示例<!DOCTYPEhtml><htmlng-app="myApp"><head>
<metacharset="UTF-8">
<title>radio&checkbox</title>
<scripttype="text/javascript"src="http://cdn.bootcss.com/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> （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |