AngularJS入门(用ng-repeat指令实现循环输出  更新时间:2016年05月05日 08:54:00   投稿:wulei   这篇文章主要介绍了AngularJS入门(用ng-repeat指令实现循环输出,需要的朋友可以参考下 循环输出列表很多项目在web服务端做,前端做好模版后后端写jsp代码,双方需要紧密合作,分清责任。有些项目由后端提供restful方法,前端用ajax调用自己循环,这种一般是大把的jquery拼字符串,太不直观,有人搞出了js模板,也没好到哪里去。 用AngularJS就爽多了,语法和JSP类似: ng-repeat directive 我的购物车 序号 商品 单价 数量 金额 操作 {{$index + 1}} {{item.name}} {{item.price | currency}} {{item.quantity * item.price | currency}} Remove ng-repeat指令生命在需要循环内容的元素上,items和控制器上的变量名对应,item是为数组中单个对象起的别名。$index可以返回当前引用对象的序号,从0开始,另外还有$first、$middle、$last可以返回布尔值,用于告诉你当前元素是否是集合中的第一个中间的最后一个元素。 您可能感兴趣的文章: AngularJS 中的数据源的循环输出 angularjs循环对象属性实现动态列的思路详解 AngularJS ng-repeat 相关文章 angularJS 中$scope方法使用指南 这篇文章主要介绍了angularJS 中$scope方法使用指南,需要的朋友可以参考下 2015-02-02 深入理解Angularjs中$http.post与$.post 本篇文章主要介绍了深入理解Angularjs中$http.post与$.post ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-05-05 Angular实现可删除并计算总金额的购物车功能示例 这篇文章主要介绍了Angular实现可删除并计算总金额的购物车功能,涉及AngularJS事件响应、元素遍历与数值运算等相关操作技巧,需要的朋友可以参考下 2017-12-12 浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象) 今天小编就为大家分享一篇浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-10-10 详解Angular组件之投影 在html规范里面,它定义了非常多的标签,在这些标签里面,相同标签之间的嵌套,不同标签之间的嵌套,是十分常见,在Angular里面,我们可以通过自定义标签的方式引用组件,这里的标签能否像原生的html标签一样,来嵌入html标签,或者嵌套其他组件标签呢?本文将介绍投影的作用。 2021-05-05 angular中的post请求处理示例详解 这篇文章主要给大家介绍了关于angular中post请求处理的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用angular具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧 2020-06-06 angular 动态组件类型详解(四种组件类型) 这篇文章给大家讲解四种组件类型,非常不错,具有参考借鉴价值,对angular 动态组件类型感兴趣的朋友参考下吧 2017-02-02 如何用angularjs制作一个完整的表格 本文给大家分享的是使用angularjs制作一个完整的表格的真实案例,结合前几篇的内容,把整个完整的代码分享给大家,有需要的小伙伴可以参考下 2016-01-01 AngularJs ng-change事件/指令的用法小结 本篇文章主要介绍了AngularJs ng-change事件/指令的小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-11-11 基于angular2 的 http服务封装的实例代码 这篇文章主要介绍了基于angular2 的 http服务封装实例代码, 2017-06-06 最新评论

循环输出列表很多项目在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可以返回布尔值,用于告诉你当前元素是否是集合中的第一个中间的最后一个元素。

您可能感兴趣的文章:

  • AngularJS 中的数据源的循环输出
  • angularjs循环对象属性实现动态列的思路详解
张贴在3