码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-08-29 18:50:24      阅读:5978      评论:0      收藏:0      [点我收藏+]

标签:angularjs   ng-model   radio双向绑定   checkbox绑定   

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

一、ng-model

ng-model指令用来将input、select、textarea或自定义表单控件同包含它们的作用域中的属性进行绑定。它将当前作用域中运算表达式的值同给定的元素进行绑定。如果属性不存在,它会隐式创建并将其添加到当前作用域中。
始终用ng-model来绑定scopescope上的属性,这可以避免在作用域或后代作用域中发生属性覆盖!

<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" />篮球

四、完整示例

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>radio & checkbox</title>
    <script type="text/javascript" src="http://cdn.bootcss.com/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>

[转载请标明出处:http://blog.csdn.net/ligang2585116]

版权声明:本文为博主原创文章,未经博主允许不得转载。转载请标明出处:http://blog.csdn.net/ligang2585116!

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

标签:angularjs   ng-model   radio双向绑定   checkbox绑定   

原文地址:http://blog.csdn.net/ligang2585116/article/details/48089285

(1)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!