AngularJS学习（3）模板-JavaSript-爱易网页

AngularJS学习（3）模板

日期：2014-05-16　浏览次数：20340 次

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."}
  ];
}

在线示例?