Anjular筆記2--數組的操做與顯示
<!DOCTYPE html>
<html ng-app="notesApp">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
<script src="js/jquery-3.1.1.min.js"></script>
</head>
<body ng-controller="MainCtrl as ctrl">
<div ng-repeat="note in ctrl.notes">
<span class="label">{{ note.label}}</span>
<span class="status" ng-bind="note.done"></span>
</div>
<script>
angular.module('notesApp',[]).controller('MainCtrl',[function(){
var self=this;
self.notes=[{id:1,label:'First Note',done:false},
{id:2,label:'Second Note',done:true},
{id:3,label:'Third Note',done:true}]
}])
</script>
</body>
</html>
html
1.在控制器MainCtrl中引入了一個由Json對象組成的數組，這個數組被賦予控制器實例notes成員變量。jquery
2.在HTML中使用了 ng-repeat指令，它可以遍歷數組，經過鍵和值訪問對象並顯示在HTML中。包含ng-repeat指令的那個元素將成爲模板， AnjularJS加載模板併產生一份副本，而後對於ng-repeat的每個實例都採起相同的操做。 數組
本例中用來顯示label和status的<span>元素重複了三次。notes數組中每一條記錄佔一次。 咱們在ng-repeat模板中定義了一個新的變量note ,該變量並非定義在控制器之中，而是由ng-repeat建立。在每個ng-repeat的實例中都有一個單獨的note,表明數組中的一條記錄。app
3.用花括號來顯示note的label屬性，用ng-bindthis
- 1. Anjular筆記4--ng-repeat的應用
- 2. 六星經典CSAPP筆記(2)信息的操做和表示
- 3. Java 2：數組的基本操做
- 4. LeetCode筆記--數組（2）
- 5. history查看歷史操做記錄，並顯示操做時間
- 6. 數組的操做
- 7. ember.js:使用筆記1-數組數據統一顯示
- 8. OCC 顯示筆記
- 9. redis數據操做筆記
- 10. 計算機組成原理學習筆記——數的表示（2）
- 更多相關文章...
- • Thymeleaf顯示Bean的值 - Thymeleaf 教程
- • ADO 顯示 - ADO 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 互聯網組織的未來：剖析GitHub員工的任性之源
-
每一个你不满意的现在，都有一个你没有努力的曾经。