Binding 指令實現雙向數據綁定

時間 2019-12-05

標籤 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>

相關標籤/搜索