代码
#方法一：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>
时间： 2024-10-10 20:57:44