- 開始撰寫第一個程式
下載Angular套件:https://angularjs.org/
載入套件:
<script src="angular.js"></script>
宣告Angular’s Boundaries
(1)和(2) 載入的範圍不同，用來告訴Angular該網頁哪個部分需要處理(1)載入整個網頁為Template
<html ng-app>
…
</html>(2)載入div元素之間為Template
<html>
…
<div ng-app>
…
</div>
…
</html>
- 完整的網頁
| <html ng-app="myList"> <head> <title>My Shopping List</title> <script src="angular.js"></script> </head> <body ng-controller='ListController'> <div > <div ng-repeat='item in items'> <span>{{item.title}}</span> <input ng-model='item.quantity'> <span>{{item.price | currency}}</span>, <span>總價: {{item.price * item.quantity | currency}}</span> <button ng-click="remove($index)">Remove</button> </div> </div> </body> <script> var myApp = angular.module('myList',[]); myApp.controller('ListController', function($scope){ $scope.items=[ {title:"國語",quantity:10, price:350}, {title:"英文",quantity:8, price:450}, {title:"公民",quantity:7, price:350} ]; $scope.remove = function(index) { $scope.items.splice(index, 1); } });</script> </html> |
| 說明: ng-app : 用來告訴Angular該網頁哪個部分需要處理，此範例定義在<html>標簽中表示整個網頁都需要處理，。 ng-controller : 宣告控制器用來處理網頁 ng-repeat : 我們將物品陣列利用item的物件逐一的讀取顯示出來，{{item.title}}為資料繫結(data binding)用來將保持網頁上資料同步。 ng-model : 用來建立quantity與{{item.price * item.quantity | currency}} 的關係，當我們改變物品的數量同時也會改變總價。 |
留言
張貼留言