您的位置：首页 > 编程技术 > js  >  AngularJS ng-repeat遍历输出的用法

AngularJS ng-repeat遍历输出的用法

 更新时间：2017年6月24日 10:00  点击：2096

AngularJS  ng-repeat遍历输出的用法,最近需要用，就顺便发到随笔上了

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ng-repeat directive</title>
</head>
<body ng-app="myApp">
<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="js/angular-1.3.0.14/angular.min.js"></script>
<script>
  var app = angular.module('myApp', []);
  app.controller('CartController',function($scope){
    $scope.items = [
      {name: "苹果 iPhone7", quantity: 1, price: 5088.00},
      {name: "荣耀Magic", quantity: 1, price: 3699.00},
      {name: "vivo X9", quantity: 2, price: 2798.00}
    ];
    //$index包含了ng-repeat过程中的循环计数
    $scope.remove = function (index) {
      $scope.items.splice(index, 1);
    }
  })
</script>
</body>
</html>

ng-repeat指令生命在需要循环内容的元素上，items和控制器上的变量名对应，item是为数组中单个对象起的别名。

$index可以返回当前引用对象的序号，从0开始，另外还有$first、$middle、$last可以返回布尔值，用于告诉你

当前元素是否是集合中的第一个中间的最后一个元素。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

[!--infotagslink--]

相关文章

  • Spring AOP 对象内部方法间的嵌套调用方式

    这篇文章主要介绍了Spring AOP 对象内部方法间的嵌套调用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-08-29

  • 详解C++ string常用截取字符串方法

    这篇文章主要介绍了C++ string常用截取字符串方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-04-25

  • Spring Cloud 中@FeignClient注解中的contextId属性详解

    这篇文章主要介绍了Spring Cloud 中@FeignClient注解中的contextId属性详解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-09-25

  • Springboot如何实现Web系统License授权认证

    这篇文章主要介绍了Springboot如何实现Web系统License授权认证,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-05-28

  • mybatis 返回Integer,Double,String等类型的数据操作

    这篇文章主要介绍了mybatis 返回Integer,Double,String等类型的数据操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-25

  • pytorch nn.Conv2d()中的padding以及输出大小方式

    今天小编就为大家分享一篇pytorch nn.Conv2d()中的padding以及输出大小方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-04-27

  • 如何在Spring WebFlux的任何地方获取Request对象

    这篇文章主要介绍了如何在Spring WebFlux的任何地方获取Request对象，帮助大家更好的理解和使用springboot框架，感兴趣的朋友可以了解下...2021-01-26

  • 详解SpringCloudGateway内存泄漏问题

    这篇文章主要介绍了详解SpringCloudGateway内存泄漏问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-07-16

  • golang 调用 php7详解及实例

    这篇文章主要介绍了golang 调用 php7详解及实例的相关资料,需要的朋友可以参考下...2017-01-15

  • 浅谈C++中的string 类型占几个字节

    本篇文章小编并不是为大家讲解string类型的用法，而是讲解我个人比较好奇的问题，就是string 类型占几个字节...2020-04-25

  • Spring为什么不推荐使用@Autowired注解详析

    @Autowired 注解的主要功能就是完成自动注入,使用也非常简单,但这篇文章主要给大家介绍了关于Spring为什么不推荐使用@Autowired注解的相关资料,需要的朋友可以参考下...2021-11-03

  • jQuery实现彩带延伸效果的网页加载条loading动画

    本文实例讲述了jQuery实现彩带延伸效果的网页加载条loading动画。分享给大家供大家参考，具体如下：这里介绍的jQuery彩带效果网页加载条动画，我觉得挺有创意的，虽然难度不算大，但能想到用这样一个背景来做Loading加载条，也实...2015-10-30

  • Springboot如何使用mybatis实现拦截SQL分页

    这篇文章主要介绍了Springboot使用mybatis实现拦截SQL分页,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-06-19

  • 【C#基础】Substring截取字符串的方法小结（推荐）

    这篇文章主要介绍了Substring截取字符串方法小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-25

  • java中String类型变量的赋值问题介绍

    下面小编就为大家带来一篇java中String类型变量的赋值问题介绍。小编觉得挺不错的。现在分享给大家，给大家一个参考。...2016-03-28

  • Nodejs中使用captchapng模块生成图片验证码

    本篇文章主要介绍了Nodejs中使用captchapng模块实现图片验证码，非常具有实用价值，需要的朋友可以参考下 ...2017-05-22

  • PostgreSQL之分区表(partitioning)

    通过合理的设计，可以将选择一定的规则，将大表切分多个不重不漏的子表，这就是传说中的partitioning。比如，我们可以按时间切分，每天一张子表，比如我们可以按照某其他字段分割，总之了就是化整为零，提高查询的效能...2020-07-11

  • 解决Docker中的error during connect异常情况

    这篇文章主要介绍了解决Docker中的error during connect异常情况，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-22

  • SpringMVC文件上传原理及实现过程解析

    这篇文章主要介绍了SpringMVC文件上传原理及实现过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-15

  • jquery对Json的各种遍历方法总结(必看篇)

    下面就为大家带来一篇jquery对Json的各种遍历方法总结(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-10-02