AngularJS学习(三)模板

 JSP也算个模板吧,不过是服务端的。

 

Html代码 复制代码 收藏代码
  1. <!DOCTYPE html>
  2. <html ng-app><!-- 必须 -->
  3. <title>AngularJS学习(三)模板</title>
  4. <meta charset="utf-8">
  5. <!-- 引入angularJS -->
  6. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
  7. <script src="03-1.js"></script>
  8. <!-- ng-controller指令指定了一个控制器,见03-1.js中的定义,这个控制器的作用范围(域)即在这个div内 -->
  9. <div ng-controller="PhoneListCtrl">
  10. <!-- 这里phones定义在PhoneListCtrl内,即$scope.phones -->
  11. <p>手机总数:{{ phones.length }}</p>
  12. <ul>
  13. <!-- ng-repeat指令 用于循环 -->
  14. <li ng-repeat="phone in phones">
  15. {{ $index + 1 }}<!-- $index 用于获取循环的当前索引 -->
  16. {{ phone.name }}
  17. <p>{{ phone.snippet }}</p>
  18. </li>
  19. </ul>
  20. <hr>
  21. <!-- ng-init指令 用于初始化一个值 -->
  22. <div ng-init="friends = {'adam':10, 'amalie':12}">
  23. <p>对象:{{ friends }}</p>
  24. <ul>
  25. <!-- ng-repeat指令 另一种循环方式 -->
  26. <ol ng-repeat="(key,val) in friends">
  27. {{ '第' + ($index + 1) + '属性为:' + key + ',它的值是:' + val}}<!-- $index 这种方式下依旧可用 -->
  28. </ol>
  29. </ul>
  30. <div>
  31. </div>
  32. </html>
<!DOCTYPE html>
<html ng-app><!-- 必须 -->
    <title>AngularJS学习(三)模板</title>
    <meta charset="utf-8">
    <!-- 引入angularJS -->
    <script src=\'#\'" //ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
    <script src=\'#\'" /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:

Js代码 复制代码 收藏代码
  1. var PhoneListCtrl = function($scope) {
  2. $scope.phones = [
  3. {"name": "Nexus S",
  4. "snippet": "Fast just got faster with Nexus S."},
  5. {"name": "Motorola XOOM™ with Wi-Fi",
  6. "snippet": "The Next, Next Generation tablet."},
  7. {"name": "MOTOROLA XOOM™",
  8. "snippet": "The Next, Next Generation tablet."}
  9. ];
  10. }  
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."}
  ];
}

 

你可能感兴趣的:(学习)