AngularJS ng-repeat遍历输出的用法

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可以返回布尔值，用于告诉你

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

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

赞 (0)

相关推荐

  • Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍

    Angular ng-repeat遍历渲染 业务中有时需要在异步获取数据并用ng-repeat遍历渲染完页面后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己动手写.有经验的同学都应该知道,在ng-repeat模板实例内部会暴露出一些特殊属性$index/$first/$middle/$last/$odd/$even,$index会随着每次遍历(从0开始)递增,当遍历到最后一个时,$last的值为true,so,通过判断$last的值来监听ng-rep

  • AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题

    本文实例讲述了AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题.分享给大家供大家参考,具体如下: 我们可以使用ng-repeat指令遍历一个JavaScript数组,当数组中有重复元素的时候,AngularJS会报错: Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. R

  • Angular ng-repeat 对象和数组遍历实例

    直接上代码 <!DOCTYPE html> <html> <head> <meta name="description" content="[Ngrepeat in obj and arr]"> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script

  • angularJS利用ng-repeat遍历二维数组的实例代码

    最近在做报表的项目,有一种情况是后台返回给我的是一个二维数组,在前台将数据放入到表格中,因为我们用的是AngularJS的前台框架,所以利用ng-repeat来实现: 首先在js中: 复制代码 代码如下: $scope.Week = [[ '云南省 ', 'a', 's', 'd', 'e', 'w','t' ],[ '陕西省 ', 'l', 'p', 'o', 'i', 'u','y' ],[ '青海省 ', 1, 2, 4, 4, 5, 6 ] ]; 在HTML中: 样式一: <ul ng-

  • AngularJS ng-repeat遍历输出的用法

    AngularJS  ng-repeat遍历输出的用法,最近需要用,就顺便发到随笔上了 <!doctype html> <html> <head> <meta charset="utf-8"> <title>ng-repeat directive</title> </head> <body ng-app="myApp"> <table ng-controller=&

  • AngularJS  ng-repeat遍历输出的用法

    AngularJS  ng-repeat遍历输出的用法,最近需要用,就顺便发到随笔上了 <!doctype html> <html> <head> <meta charset="utf-8"> <title>ng-repeat directive</title> </head> <body ng-app="myApp"> <table ng-controller=&

  • AngularJS中下拉框的高级用法示例

    AngularJS中下拉框的高级用法示例

    本文实例讲述了AngularJS中下拉框的高级用法.分享给大家供大家参考,具体如下: HTML正文: <body ng-app="myApp"> <!-- 对象内部属性遍历:x--key y---value --> <div ng-controller="myctr01"> {{sites}}<br> <select ng-model="site" ng-options="x for

  • AngularJS打开页面隐藏显示表达式用法示例

    本文实例讲述了AngularJS打开页面隐藏显示表达式用法.分享给大家供大家参考,具体如下: 1.使用 ng-cloak, 同时要在css加入一行 [ng-cloak] {display: none;} 样式 [ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } 2.使用ng-bind, 代替{{}} 这个不太方便,因为使用ng-bin

  • PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能

    本文实例讲述了PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能.分享给大家供大家参考,具体如下: <?php $n=$_REQUEST["n"]; if($n>8) { echo "{$n}太大了,影响服务器性能"; return; } define("N",$n); $d=array(); $v=array(); for($i=0;$i<=N;$i++){ $d[$i]=$v[$i]=0; } function

  • AngularJS中下拉框的基本用法示例

    AngularJS中下拉框的基本用法示例

    本文实例讲述了AngularJS中下拉框的基本用法.分享给大家供大家参考,具体如下: HTML正文: <div ng-app="myApp" ng-controller="myCtrl"> <select ng-model="selectedName" ng-options="x for x in names"></select> 等价于: <select> <option

  • 详解angularjs获取元素以及angular.element()用法

    本文介绍了详解angularjs获取元素以及angular.element()用法 ,分享给大家,具体如下: addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()-在每个匹配元素里面的末尾处插入参数内容 attr() - 获取匹配的元素集合中的第一个元素的属性的值 bind() - 为一个元素绑定一个事件处理程序 children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选

  • ThinkPHP模板输出display用法分析

    本文实例分析了ThinkPHP模板输出display用法.分享给大家供大家参考.具体分析如下: 模板变量赋值后就需要调用模板文件来输出相关的变量,模板调用通过display方法来实现,我们在操作方法的最后使用: 复制代码 代码如下: $this->display(); 就可以输出模板,根据前面的模板定义规则,因为系统会按照默认规则自动定位模板文件,所以通常display方法无需带任何参数即可输出对应的模板,这是模板输出的最简单的用法. 事情总有特例,或者根本不需要按模块进行分目录存放,不过dis

  • php目录遍历函数opendir用法实例

    本文实例讲述了php目录遍历函数opendir用法.分享给大家供大家参考.具体分析如下: opendir()函数的作用是:打开目录句柄,如果该函数成功运行,将返回一组目录流(一组目录字符串),如果失败将返回错误[error],你可以在函数的最前面加上"@"来隐藏错误. syntax语法:opendir(directory,context) parameter 参数:description 描述:directory required. specifies the directory to

  • jquery遍历函数siblings()用法实例

    本文实例讲述了jquery遍历函数siblings()用法.分享给大家供大家参考,具体如下: siblings([expr]) 得到所有匹配元素集合中各个元素的所有兄弟元素集合.返回匹配元素集合 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> &l

随机推荐