摘要:[AngularJS]範例2及說明
概述
本章，將介紹新的Directives，並不贅續說明直接以範例說明。
-
ng-src
- 若要綁定src的值並須使用。
- 若直接使用html 物件的src，可能會造成一開始時，controller內的屬性還沒建構完畢，造成無法綁定問題所以建議直接使用ng-src。
-
ng-click
- 當點擊時，可賦值；或呼叫函示，做javaScript判斷。
-
ng-class
- 另外補充一點在這裡使用ng-class，是為了激活選到的頁面(其實只是選中時顏色的變更)
-
綁定說明
- {{ }} 雙花括弧，默認是雙向綁定(two way binding)
- {{ }} 雙花括弧，默認是雙向綁定(two way binding)
寶石商店
現在有個任務，就是在寶石的顯示上，想讓每顆寶石帶有更多資訊。實際的想法如下:
- 在每顆寶石顯示的項目中，新增三個細節的table，顯示的資訊分別是Description、Price、ReView。
- 細節藏在代碼Comment中。
html code:
<!DOCTYPE html>
<html ng-app="store" >
<head lang="en">
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<link rel="stylesheet" href="bootstrap.css"/>
<link rel="stylesheet" href="bootstrap-theme.css">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-controller="StoreController as store">
<p> <ul class="list-group">
<li class="list-group-item"
ng-repeat="product in store.products | orderBy:'name' | limitTo:4 ">
<h3>
{{product.name | uppercase}}
<em class="pull-right" >
{{product.price | currency }}
</em>
</h3>
<p>{{product.date | date:'MM/dd/yyyy'}}</p>
<p><img ng-src="{{product.img}}" ></p>
//新增 一個 controller //新增一個 PanelController 來控制顯示寶石資訊細節的 table
<section ng-controller="PanelController as panel" >
<ul class="nav nav-pills">
<!--active:panel.tab===1 的意思是 若 panel.tab===1 時 激活(顯示) -->
<li ng-class={active:panel.tabIndex===1} >
<a href ng-click="panel.selectTab(1)">Description</a>
</li>
<li ng-class="{active:panel.tabIndex===2}" >
<a href ng-click="panel.selectTab(2)">Price</a>
</li>
<li ng-class="{active:panel.tabIndex===3}" >
<a href ng-click="panel.selectTab(3)">Reviews</a>
</li>
</div>
</ul>
{{panel.tabIndex}}
<div class="container">
//呼叫controller的方法 判斷資訊是否 可顯示
<div class="panel" ng-show="panel.isSelected(1)">
<h4>Description</h4>
<p>{{product.description}}</p>
</div>
<div class="panel" ng-show="panel.isSelected(2)" >
<h4>Price</h4>
<p>{{product.price}}</p>
</div>
<div class="panel" ng-show="panel.isSelected(3)" >
<h4>Reviews</h4>
<img ng-src="{{product.img}}" />
</div>
</div>
</section>
</li>
</ul>
</p>
</body>
</html>
js code:
//建構
AppConstructor()
//將你的JavaScipt 放在一個閉包裡是一個好的習慣
function AppConstructor()
{
app = angular.module('store', [ ]);
app.controller('StoreController', function()
{
this.products=gems;
});
var gems=[
{
name:'Dodecahedron',
price:5.95,
description:'Some gems have hidden qualities beyond their luster,beyond their shine...Dodeca is one of those gems.',
date:1388123412323,
img:'http://content.screencast.com/users/BensonLan/folders/Jing/media/3244f630-438f-42ea-9f1f-cd8645b3f024/2014-07-10_1510.png',
},
{
name:'pentagonalGem',
price:5,
description:'Some gems have hidden qualities beyond their luster,beyond their shine...Dodeca is one of those gems.',
date:1288123412323,
img:'http://content.screencast.com/users/BensonLan/folders/Jing/media/f6c03fe4-6d0a-421f-904e-9ad3890ed755/2014-07-10_1511.png',
},
{
name:'redGem',
price:3.85,
description:'Red.',
date:1299123412323,
img:'http://content.screencast.com/users/BensonLan/folders/Jing/media/ea8c267d-032d-4d54-b9a4-cb5861e2c7ca/2014-07-10_1512.png',
}
,
{
name:'bigGem',
price:3.20,
description:'big',
date:132123412323,
img:' http://content.screencast.com/users/BensonLan/folders/Jing/media/c8d1f866-8cc0-4475-84e5-b671176367e2/2014-07-10_1512.png',
}
]
//新增一個 PanelController 來控制顯示寶石資訊細節的 table
app.controller('PanelController', function()
{
//controller內的屬性一有變動就會自動檢查html與controller有綁定方法的元素
//所以只需 將html 元素 與 controll綁定就好 不用擔心何時觸發
//這部分 是否有人可以幫忙補充?
this.tabIndex = 1;
this.selectTab = function(setTab) {
this.tabIndex = setTab;
}
//判斷選擇的頁面 是否 等於 該tabIndex
this.isSelected = function(checkTab){
return this.tabIndex === checkTab;
};
});
}
Result:
