AngularJS入门（用ng-repeat指令实现循环输出

循环输出列表很多项目在web服务端做，前端做好模版后后端写jsp代码，双方需要紧密合作，分清责任。有些项目由后端提供restful方法，前端用ajax调用自己循环，这种一般是大把的jquery拼字符串，太不直观，有人搞出了js模板，也没好到哪里去。

用AngularJS就爽多了，语法和JSP类似：

<!doctype html>
<html ng-app>
<head>
  <meta charset="utf-8">
  <title>ng-repeat directive</title>
</head>
<body>
<table ng-controller="CartController">
  <caption>我的购物车</caption>
  <tr>
    <th>序号</th>
    <th>商品</th>
    <th>单价</th>
    <th>数量</th>
    <th>金额</th>
    <th>操作</th>
  </tr>
  <tr ng-repeat="item in items">
    <td>{{$index + 1}}</td>
    <td>{{item.name}}</td>
    <td>{{item.price | currency}}</td>
    <td><input ng-model="item.quantity"></td>
    <td>{{item.quantity * item.price | currency}}</td>
    <td>
      <button ng-click="remove($index)">Remove</button>
    </td>
  </tr>
</table>

<script src="../lib/angularjs/1.2.26/angular.min.js"></script>
<script>
  function CartController($scope) {
    $scope.items = [
      {name: "雷柏（Rapoo） V500 机械游戏键盘 机械黄轴", quantity: 1, price: 199.00},
      {name: "雷柏（Rapoo） V20 光学游戏鼠标 黑色烈焰版", quantity: 1, price: 139.00},
      {name: "AngularJS权威教程", quantity: 2, price: 84.20}
    ];

    $scope.remove = function (index) {
      $scope.items.splice(index, 1);
    }
  }
</script>
</body>
</html>

ng-repeat指令生命在需要循环内容的元素上，items和控制器上的变量名对应，item是为数组中单个对象起的别名。$index可以返回当前引用对象的序号，从0开始，另外还有$first、$middle、$last可以返回布尔值，用于告诉你当前元素是否是集合中的第一个中间的最后一个元素。

赞 (0)

相关推荐

  • AngularJS 中的数据源的循环输出

    AngularJS 中的数据源的循环输出 最近也是刚刚接触angular前端框架的,但使用的几天就感觉效果比较明显,尤其是在数据的输出效果上来看,比原生的js的编程效率要高许多,所以这也就是为什么许多公司都要求前端开发需要你熟悉使用前端框架了,可以更快的提高项目的效率.今天想要说的就是在使用angular前端框架的时候的数据源的循环输出. 把数组中的数据循环输出到页面上,如果使用的js的方法的话就是需要对数组进行for循环输出,并且在输出的时候是对页面中的DOM层中的节点进行操作的,而如果使用前

  • AngularJS入门（用ng-repeat指令实现循环输出

    循环输出列表很多项目在web服务端做,前端做好模版后后端写jsp代码,双方需要紧密合作,分清责任.有些项目由后端提供restful方法,前端用ajax调用自己循环,这种一般是大把的jquery拼字符串,太不直观,有人搞出了js模板,也没好到哪里去. 用AngularJS就爽多了,语法和JSP类似: <!doctype html> <html ng-app> <head> <meta charset="utf-8"> <title&g

  • AngularJS入门教程之ng-checked 指令详解

    AngularJS ng-checked 指令 AngularJS 实例 选择一个或选择所有选项: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head>

  • AngularJS入门教程之ng-class 指令用法

    AngularJS ng-class 指令 AngularJS 实例 修改 <div> 元素的类: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <sty

  • AngularJS入门教程之AngularJS指令

    熟悉HTML的朋友都知道,HTML有很多属性.比如<a>标签的href属性可以来指定链接的URL地址,<input>标签的type属性可以用来指定input的类型.AngularJS指令就是通过扩展HTML的属性来为 AngularJS应用增加功能. AngularJS指令用于扩展HTML.这些都是先从ng- 前缀的特殊属性.我们将讨论以下指令: 常用AngularJS指令 ng-app 指令初始化一个 AngularJS 应用程序. ng-init 指令初始化应用程序数据. ng

  • AngularJS学习笔记之基本指令(init、repeat)

    AngularJS学习笔记之基本指令(init.repeat) <h3>ng-init初始化变量</h3> <div ng-init="name='aurora';age='18'"> <p ng-bind="name+','+age"></p> <p>{{name+','+age}}</p> <p ng-bind="name"></p>

  • AngularJS入门教程一：路由用法初探

    本文实例讲述了AngularJS路由用法.分享给大家供大家参考,具体如下: 目前的理解中,这个NG的路由模块可以用于带有多视图的单页面开发. 先把所有代码贴出: HTML: <!doctype html> <meta charset="UTF-8"> <html> <head> <link href="self.css" rel="external nofollow" rel="st

  • AngularJS入门教程之路由机制ngRoute实例分析

    AngularJS入门教程之路由机制ngRoute实例分析

    本文实例讲述了AngularJS路由机制ngRoute.分享给大家供大家参考,具体如下: 引言 在我们介绍路由之前我们首先谈一下SPA,所以SPA就是我们现在经常说的单页应用single page APP,为了实现无刷新的视图切换我们之前的做法就是利用AJAX从后取出数据然后渲染在前台页面HTML中,但是AJAX有一个致命的缺点就是不能实现浏览器的后退按钮失效,为了解决这个问题我们通常使用hash,监听hashchange事件来进行视图切换,另一个方法是用HTML5的history API,通过

  • AngularJS入门教程之AngularJS表达式

    表达式用于应用程序数据绑定到HTML.表达式都写在双括号就像{{表达式}}.表达式中的行为跟ng-bind指令方式相同. AngularJS应用表达式是纯javascript表达式,并输出它们被使用的数据在那里. AngularJS表达式格式 : {{expression }} AngularJS表达式可以是字符串.数字.运算符和变量 数字运算{{1 + 5}} 字符串连接{{ 'abc' + 'bcd' }} 变量运算 {{ firstName + " " + lastName }}

  • AngularJS入门教程之Helloworld示例

    AngularJS入门教程之Helloworld示例

    本文实例讲述了AngularJS入门教程之Helloworld示例.分享给大家供大家参考,具体如下: 什么是AngularJs? angularjs是一个为动态WEB应用设计的结构框架.它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚.简洁地构建你的应用组件.它的创新点在于,利用数据绑定和依赖注入,它使你不用再写大量的代码了.这些全都通过浏览器端的javascript实现,这也使得它能够完美地和任何服务器技术结合. AngularJS简单的Helloworld例子: <!D

随机推荐