首页 > 其他 > 详细

Binding 指令实现双向数据绑定

时间:2016-05-24 18:36:30      阅读:217      评论:0      收藏:0      [点我收藏+]

代码

#方法一:ng-bind的使用
#方法二:{{}}插值表达式的使用
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>AngualrJS进阶</title> 
<link rel="stylesheet" type="text/css" href="css/foundation.css">
</head>
<body style="padding:10px;" ng-app="">
<div>
<input type="text" ng-model="uname">
<!--这里是模拟后台获取的数据,这里以input为例,需要规定类型ype以及ng-model属性-->
<div>{{"用户名:"+uname}}</div>
<!--这里的双向数据绑定符号{{}}不能省略,否则不会实现数据绑定功能;
在实际应用中使用的是http获取数据,然后输出-->
<br>
<h1 ng-block="">{{uname}}</h1>
<!--当AngularJS扫描到ng-block的时候,等待后面uname加载完移除class,然后显示h1标签-->
<br>
<div ng-bind="‘用户名:‘+uname"></div>
<!--这里ng-bind后面仍然可以使用{{}}进行数据绑定,但这里采用更为方便的双引号,里面字符输出用单引号-->
<div class="{{uname}}">{{uname}}</div>
<!--设置显示的class,这里如果输入CSS中具备的元素,如button等会显示Button按钮-->
</div>
</body>
<script type="text/javascript" src="js/angular.js"></script>
</html>

  

 

Binding 指令实现双向数据绑定

原文:http://www.cnblogs.com/yedushusheng/p/5524245.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!