【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的行为,实现页面交互以及数据绑定. 指令是一种执行的信号,一 ...
随机推荐
- C#简单邮件发送
System.Net.Mail.MailMessage message = new System.Net.Mail.MailMessage(); message.From = new System.N ...
- The following module was built either with optimizations enabled or witherout debug information
出现这个问题的原因是这个程式有做版控,服务器上的版本比本机版本小 解决方式为:删除服务器上的版控或者本机版本改成与服务器一致即可
- Mysql 中is null 和 =null 的区别
在mysql中,筛选非空的时候经常会用到is not null和!=null,这两种方法单从字面上来看感觉是差不多的,其实如 果去运行一下试试的话差别会很大! 为什么会出现这种情况呢? null 表示 ...
- NET平台下的Excel编程|C#操作Excel|Application和ApplicationClass的联系和区别
NET平台下的Excel编程|C#操作Excel|Application和ApplicationClass的联系和区别 1. Interop含义Interop是互操作的含义.Microsoft.Off ...
- SQL Server主键自动生成_表and存储过程
主键表: CREATE TABLE [dbo].[KEYCODE]( [KeyName] [varchar](12) NOT NULL, [KeyTableName] [varchar](40) NU ...
- Swift - 02 - 常量和变量
//: Playground - noun: a place where people can play import UIKit var str = "Hello, playground& ...
- 什么是NSAssert?
断言, 判断是否符合某个特定条件, 符合就继续运行程序, 反之就抛出异常, 后面为自定义错误提示, 也可以使用NSParameterAssert, 在调试上有着很大的方便 int a = 0; NSA ...
- 安卓 报错 Check the Eclipse log for stack trace.
移除Android Dependencies就行了. 在properties的Libraries里
- uvalive 5760 Alice and Bob (组合游戏,dp)
题目链接: http://vjudge.net/problem/viewProblem.action?id=25636 对于>1的堆,必然会被其中一人全部合并. 然后就是二维dp,dp[非1堆的 ...
- 安卓webview下使用zepto的swipe失效
安卓webview下使用zepto的swipe遇到的坑 众所周知,安卓手机上touch事件一直有各种各样莫名其妙的问题. 比如,我想要用swipeLeft/swipeRight监听向左向右滑动事件,如 ...