Binding 指令实现双向数据绑定

代码

#方法一: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 指令实现双向数据绑定)