<!DOCTYPE html>
<html ng-app="notesApp">
<head>
<meta http-equiv="Content-Type"
content="text/html;
charset=utf-8"/>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<title>Array</title>
<meta charset="utf-8"
/>
<style>
.done{background-color:lightgreen;}
.pending{background-color:lightpink;}
</style>
</head>
<body ng-controller="MainCtrl
as ctrl">
<!--ng-repeat模板，AngularJS取得此範圍的資料後，會重覆生成，等同於其他成是語言的foreach。-->
<!--ng-class套用或移除CSS，可以是字串或css class-->
<div
ng-repeat="note
in ctrl.notes" ng-class="ctrl.getNoteClass(note.done)">
<span class="label">{{note.label}}</span>
<!--ng-bind綁定資料，除了用大括號綁定之外，也能用此方法，兩者可交替使用。-->
<!--大括號的效能較差，會延遲AngularJS的建置和實行時間。-->
<span class="status"
ng-bind="note.done"></span>
<!--AngularJS會將ture、非空白字串、非零數字、以及非空的JS物件視為true-->
<!--ng-show是true的話，<span>區塊將會顯示。-->
<span class="assignee"
ng-show="note.assignee">{{note.assignee}}</span>
<!--ng-hide是true的話，<span>區塊將不會顯示。-->
<span class="assignee"
ng-hide="note.assignee">{{note.assignee}}</span>
</div>
<script
type="text/javascript">
angular.module('notesApp',
[])
.controller('MainCtrl',
[function
() {
var
self = this;
self.notes = [
{ id: 1, label: 'First Note', done: false,
assignee: 'Isabella' },
{ id: 2, label: 'Second Note', done: false,
assignee:0 },
{ id: 3, label: 'Third Note', done: true,
assignee: 'Rong' },
{ id: 4, label: 'Fourth Note', done: false,
assignee: 0 },
{ id: 5, label: 'Fifth Note', done: false,
assignee: 'Caesa' }
];
self.getNoteClass = function
(status) {
return
{
done: status,
pending :!status
}
};
}]);
</script>
</body>
</html>
on ng-show 執行結果：
on ng-hide 執行結果：
沒有留言:
張貼留言