AngularJS ng-repeat遍历输出的用法
更新时间：2017年06月19日 16:23:32 作者：Darkersky
本篇文章主要介绍了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可以返回布尔值，用于告诉你
当前元素是否是集合中的第一个中间的最后一个元素。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了每一个独立的JS文件或者不同的控制器如何实现数据的共享与交互的方法。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
AngularJS是一款优秀的前端JS框架，已经被用于Google的多款产品当中。下面通过本文给大家分享使用AngularJS对表单提交内容进行验证的操作方法，需要的的朋友参考下吧2017-07-07
AngularJS基础 ng-readonly 指令简单示例
本文主要介绍AngularJS ng-readonly 指令,这里对ng-readonly指令的资料做了整理，有学习AngularJS 指令的同学可以参考下2016-08-08
Angular 主要分为八大构造块（也就是八个核心概念）：模块、组件、模板、元数据、数据绑定、指令、服务、依赖注入。有兴趣的可以了解一下2017-06-06
这篇文章主要介绍了AngularJS的控制器的使用,文中给出了具体的用于HTML中的对象示例,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了AngularJS过滤器filter用法,结合实例形式较为详细的总结分析了过滤器filter的功能、分类、使用技巧及自定义过滤器的实现方法,需要的朋友可以参考下2016-12-12
对比分析AngularJS中的$http.post与jQuery.post的区别
这篇文章主要给大家对比分析AngularJS中的$http.post与jQuery.post的区别，十分的详细，是篇非常不错的文章，这里推荐给小伙伴们。2015-02-02
Bootstrap和Angularjs配合自制弹框的实例代码
今天小编通过本文给大家分享Bootstrap和Angularjs配合自制弹框的实例代码，代码简单易懂，有需要的朋友跟着小编一起学习2016-08-08
这篇文章主要介绍了Angular简单验证功能,涉及AngularJS事件响应、正则判定、页面元素属性动态修改等相关操作技巧,需要的朋友可以参考下2017-12-12
ng-include 指令用于包含外部的 HTML 文件。包含的内容将作为指定元素的子节点。下面这篇文章主要给大家介绍了Angular.Js中ng-include指令的使用与实现的相关资料，文中介绍的非常详细，需要的朋友们下面来一起看看吧。2017-05-05
最新评论