【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> @*https://code.angularjs.org/*@ <script src="https://code.angularjs.org/1.2.26/angular.min.js"></script> <style type="text/css">
table.dataintable {
margin-top: 10px;
border-collapse: collapse;
border: 1px solid #aaa;
width: 100%;
} table.dataintable th {
vertical-align: baseline;
padding: 5px 15px 5px 6px;
background-color: #d5d5d5;
border: 1px solid #aaa;
text-align: left;
} table.dataintable td {
vertical-align: text-top;
padding: 6px 15px 6px 6px;
background-color: #efefef;
border: 1px solid #aaa;
} table.dataintable pre {
width: auto;
margin: 0;
padding: 0;
border: 0;
background-color: transparent;
} table.dataintable p {
margin: 0 0 2px 0;
}
</style>
</head>
<body>
<table class="dataintable" ng-controller="CartController" style="">
<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>
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 }, { name: "雷柏（Rapoo） V500 机械游戏键盘 机械黄轴", quantity: 1, price: 199.00 },
{ name: "雷柏（Rapoo） V20 光学游戏鼠标 黑色烈焰版", quantity: 1, price: 139.00 },
{ name: "AngularJS权威教程", quantity: 2, price: 84.20 }, { name: "雷柏（Rapoo） V500 机械游戏键盘 机械黄轴", quantity: 1, price: 199.00 },
{ name: "雷柏（Rapoo） V20 光学游戏鼠标 黑色烈焰版", quantity: 1, price: 139.00 },
{ name: "AngularJS权威教程", quantity: 2, price: 84.20 }, { 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入门】用ng-repeat指令实现循环输出的更多相关文章
- AngularJS入门心得4——漫谈指令scope
上篇<AngularJS入门心得3——HTML的左右手指令>初步介绍了指令的概念和作用.已经和指令打过一个照面,就不会那么陌生了,今天主要介绍的是一个困扰了我很久终于想通的问题,这个问题与 ...
- C++入门经典-例3.25-使用循环输出闰年
1:代码如下: // 3.25.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> usin ...
- AngularJS - 入门小Demo
AngularJS四大特效 MVC模式.模块化设计.自动化双向数据绑定.依赖注入 如果了解了后端开发知识,想必对这些词汇不会陌生,AngularJS融合了后端开发的一些思想,虽然身为前端框架,但与jQ ...
- angularJS入门小Demo2 【包含不用数据库而用data.json格式响应前台的ajax请求方式测试】
事件绑定: <html> <head> <title>angularJS入门小demo-5 事件指令</title> <script src=&q ...
- angularJS入门小Demo【简单测试js代码的方法】
1.首先建立一个文件夹 demo, 2.在其中建立一个文本文档,改名为 demo-1.html, 3.把html中要引入的 js 文件拷贝到 demo目录下, 4.然后用 Notepadd++ 编辑刚 ...
- Angularjs 学习笔记-2017-02-05-初识Angular及app、model、controller、repeat指令和fileter、orderBy
ng-app 定义作用域,从作用域处开始执行ng命令指令 ng-model 数据绑定字符,用于双向数据绑定 ng-controller ng控制台,定义function name($scope)来 ...
- AngularJS入门心得3——HTML的左右手指令
在<AngularJS入门心得1——directive和controller如何通信>我们提到“AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文 ...
- AngularJS入门篇
AngularJS是一个JavaScript框架,它通过指令扩展了HTML,且通过表达式绑定数据到 HTML.顺便一提,什么是框架?比如struts2.spring.hibernate.thinkph ...
- AngularJs学习笔记3——自定义指令
指令 概述: 前面也说过一些常用指令,用于快速入门.现在详细总结一下:指令用于实现各种页面的操作,是对于底层DOM操作的封装,扩展了HTML的行为,实现页面交互以及数据绑定. 指令是一种执行的信号,一 ...
随机推荐
- 简单实现图片间的切换动画 主要用到ViewPager
简单实现图片间的切换动画 主要用到ViewPagerViewPager是android扩展包v4包中的类,这个类可以让用户左右切换当前的view.ViewPager类需要一个PagerAdapter适 ...
- android 中Log - 简单使用
例如,我们可以使用'Log.d'进行Debug,在java代码中输入Log.d(String tag, String message),tag为自己命名的tag,message为待输出的信息.然后打开 ...
- ReactNative for Android入坑（一）
最近找工作发现有些公司要求会ReactNative,决定入坑. 搭建环境:官网详细的教程附链接. 坑一:FQ,建议整个搭建过程中FQ.(FQ链接,注册有200M试用流量,环境搭建够了)第一步:安装Ch ...
- php 与 ajax 获取123的案例
同事问我,咱们从数据库里面获取数据,用ajax的方式展示到前台页面.啥都不说了,动手写个案例吧. 1,建立一个页面: <!DOCTYPE html PUBLIC "-//W3C//DT ...
- Fractal_Test
本文由博主(YinaPan)原创,转载请注明出处:http://www.cnblogs.com/YinaPan/p/Fractal_Test.html 参考:http://catlikecoding ...
- [Head First设计模式笔记]----命令模式
命令模式定义:将“请求”封装成对象,以便使用不同的请求.队列或者日志来参数化其他对象.命令模式也支持可撤销的操作. 类图: 适用设计方案举例:实现一种遥控器,该遥控器具有七个可编程的插槽(每个都可以指 ...
- 如何用angularjs制作一个完整的表格之四__自定义ng-model标签的属性使其支持input之外的html元素
有的时候我们需要为非input类型的元素添加ng-model来实现双向的数据绑定,从而减少冗余代码,那么可以尝试一下的方式 例如:我页面中使用了contenteditable这个属性来实现用户可直接编 ...
- [OSGI]Eclipse4.2 OSGI依赖Bundle
Eclipse 4.2 OSGI 依赖的Bundle: org.eclipse.osgiorg.apache.felix.gogo.runtimeorg.apache.felix.gogo.comma ...
- C++学习笔记4——类的封装（2）
简介: 重载的运算符是具有特殊名字的函数:它们的名字由关键字operator和其后要定义的运算符号共同组成.其中一元运算符有一个参数,二元运算符有两个参数. 可以被重载的运算符 + - * / % ^ ...
- bzoj4306: 玩具厂
Description 在JIH考察的地图中有N个城市,被公路依次连成了一个环,JIH想在这些城市中建一个玩具厂.城市和公路都被编号为1..N,i号公路连接i-1号城市与i号城市(1号公路连接N号城市 ...