首先看一下成果：
同時，因為變數改變了，連帶畫面也更新了。
完整程式碼如下：
<html ng-app="">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"></link>
<link href="http://angularjs.org/css/docs.css" rel="stylesheet"></link>
</head>
<body>
<div class="tabs-spacer">
</div>
<div class="span4 well">
<div>
<label>Name:</label>
<input ng-model="yourName" placeholder="Enter a name here" type="text" />
<hr />
<h1>
Hello {{yourName}}!</h1>
</div>
</div>
</body>
</html>
5~9 行加入所需要的檔案，除了 angular.min.js 之外，其它都是為了美觀而加上去的，對於此範例的功能來說是不必要的！
11~14 行也是為了美觀，仿 AngularJS 官方網站的，所以前面才會用到 angularjs.org 的 css。
16 行 ng-model="yourName"，就是將此 input 欄位跟 yourName 這個變數綁定，只要此 input 發生變化，Model 裡面的變數也會跟著變化。
19 行 {{yourName}} 則是顯示 yourName 變數，當 Model 的變數變化，顯示也跟著變化。
整個執行結果就是， 當 input 的值發生改變時， {{yourName}} 也跟著改變。
直接看 DEMO，體驗一下
DEMO 網頁
參考來源：
angularjs.org
http://angularjs.org/
沒有留言:
張貼留言