首页 > Web开发 > 详细

angularjs学习之模板

时间:2016-02-22 11:35:27      阅读:183      评论:0      收藏:0      [点我收藏+]

angularJs是模型-视图-控制器(MVC)的模式

先看一下模型和控制器:

controller.js:

function PhoneListCtrl($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."}
      ];
    }

 在controllers.js中有控制器PhoneListCtrl,控制器中初始化了一组数据模型。控制器的作用可以使模型和视图之间数据连接起来。

 

下面看一下模式如何引导视图的变化:

index.html

<body ng-controller="PhoneListCtrl">
    <ul>
        <li ng-repeat="phone in phones">
            {{phone.name}}
            <p>{{phone.snippet}}</p>
        </li>
    </ul>
</body>

  ng-controller定义了控制器(PhoneListCtrl)的作用域,只有在作用域下才能执行控制器相关指令。

  通过ng-repeat可以实现模型数据的遍历,双花括号可以实现数据的取值(类似js的表达式)。


 

angularjs学习之模板

原文:http://www.cnblogs.com/smartyu/p/5206389.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!