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员工的任性之源
-
每一个你不满意的现在，都有一个你没有努力的曾经。