AngularJS学习（三）模板
JSP也算个模板吧，不过是服务端的。
<!DOCTYPE html>
<html ng-app><!-- 必须 -->
<title>AngularJS学习（三）模板</title>
<meta charset="utf-8">
<!-- 引入angularJS -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script src="03-1.js"></script>
<!-- ng-controller指令指定了一个控制器,见03-1.js中的定义,这个控制器的作用范围(域)即在这个div内 -->
<div ng-controller="PhoneListCtrl">
<!-- 这里phones定义在PhoneListCtrl内,即$scope.phones -->
<p>手机总数:{{ phones.length }}</p>
<ul>
<!-- ng-repeat指令 用于循环 -->
<li ng-repeat="phone in phones">
{{ $index + 1 }}<!-- $index 用于获取循环的当前索引 -->
{{ phone.name }}
<p>{{ phone.snippet }}</p>
</li>
</ul>
<hr>
<!-- ng-init指令 用于初始化一个值 -->
<div ng-init="friends = {'adam':10, 'amalie':12}">
<p>对象:{{ friends }}</p>
<ul>
<!-- ng-repeat指令 另一种循环方式 -->
<ol ng-repeat="(key,val) in friends">
{{ '第' + ($index + 1) + '属性为:' + key + ',它的值是:' + val}}<!-- $index 这种方式下依旧可用 -->
</ol>
</ul>
<div>
</div>
</html>03-1.js:
var PhoneListCtrl = function($scope) {
$scope.phones = [
{"name": "Nexus S",
"snippet": "Fast just got faster with Nexus S."},
{"name": "Motorola XOOM™ with Wi-Fi",
"snippet": "The Next, Next Generation tablet."},
{"name": "MOTOROLA XOOM™",
"snippet": "The Next, Next Generation tablet."}
];
} 相关推荐
鸟菜小端前 2018-09-12
CrazyDogWang 2017-02-14
zbwroom 2016-09-23
xingdongfang 2019-11-10
zhenghao 2014-05-30
youyouzouzou 2014-05-30
zbwroom 2014-05-30
zbwroom 2014-05-29
lizean 2015-03-10
zbwroom 2015-04-10
Oranq 2015-08-29
CrazyDogWang 2016-01-06
lizean 2016-04-30
小新正在敲代码 2016-04-14
CrazyDogWang 2016-11-30
lizean 2016-12-19
princejingyun 2016-12-14
youyouzouzou 2017-02-24
youyouzouzou 2017-05-30