循环输出列表很多项目在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指令实现循环输出的更多相关文章

  1. AngularJS入门心得4——漫谈指令scope

    上篇<AngularJS入门心得3——HTML的左右手指令>初步介绍了指令的概念和作用.已经和指令打过一个照面,就不会那么陌生了,今天主要介绍的是一个困扰了我很久终于想通的问题,这个问题与 ...

  2. C++入门经典-例3.25-使用循环输出闰年

    1:代码如下: // 3.25.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> usin ...

  3. AngularJS - 入门小Demo

    AngularJS四大特效 MVC模式.模块化设计.自动化双向数据绑定.依赖注入 如果了解了后端开发知识,想必对这些词汇不会陌生,AngularJS融合了后端开发的一些思想,虽然身为前端框架,但与jQ ...

  4. angularJS入门小Demo2 【包含不用数据库而用data.json格式响应前台的ajax请求方式测试】

    事件绑定: <html> <head> <title>angularJS入门小demo-5 事件指令</title> <script src=&q ...

  5. angularJS入门小Demo【简单测试js代码的方法】

    1.首先建立一个文件夹 demo, 2.在其中建立一个文本文档,改名为 demo-1.html, 3.把html中要引入的 js 文件拷贝到 demo目录下, 4.然后用 Notepadd++ 编辑刚 ...

  6. Angularjs 学习笔记-2017-02-05-初识Angular及app、model、controller、repeat指令和fileter、orderBy

    ng-app   定义作用域,从作用域处开始执行ng命令指令 ng-model 数据绑定字符,用于双向数据绑定 ng-controller ng控制台,定义function name($scope)来 ...

  7. AngularJS入门心得3——HTML的左右手指令

    在<AngularJS入门心得1——directive和controller如何通信>我们提到“AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文 ...

  8. AngularJS入门篇

    AngularJS是一个JavaScript框架,它通过指令扩展了HTML,且通过表达式绑定数据到 HTML.顺便一提,什么是框架?比如struts2.spring.hibernate.thinkph ...

  9. AngularJs学习笔记3——自定义指令

    指令 概述: 前面也说过一些常用指令,用于快速入门.现在详细总结一下:指令用于实现各种页面的操作,是对于底层DOM操作的封装,扩展了HTML的行为,实现页面交互以及数据绑定. 指令是一种执行的信号,一 ...

随机推荐

  1. Razor html标签

    1.Label Html语法: <label for=“UserName”>用户名</label> Razor语法: @Html.LabelFor(m=>m.UserNa ...

  2. HTML5 Blob与ArrayBuffer、TypeArray和字符串String之间转换

    1.将String字符串转换成Blob对象 //将字符串 转换成 Blob 对象 var blob = new Blob(["Hello World!"], { type: 'te ...

  3. 1.Weblogic通Eclipse调试配置（Weblogic同Eclipse调试配置技术）

    概述:环境是eclipse,maven,svn, 在实际的的应用项目中,我们经常遇到本地应用程序没有问题,而部署到Weblogic上缺出现问题,查看日志并找不到原因,这时就需要调试部署上的程序与本地e ...

  4. javascript 常用array类型方法

    concat:基于当前数组中的所有项创建一个新数据,会创建当前数组一个副本,然后将接受到的参数放到数组末尾,最后返回新数组.如果没有参数,则复制当前数组并返回副本. slice:基于当前数组中一个或多 ...

  5. input border IE6 bug

    border:none;与border:0;的区别体现有两点:一是理论上的性能差异二是浏览器兼容性的差异. 1.性能差异[border:0;]把border设为“0”像素虽然在页面上看不见,但按bor ...

  6. centOS 7配置Apache + MySQL + PHP

    一.配置防火墙,开启80端口.3306端口 CentOS 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙. 1.关闭firewall: #停止firewall服务 sys ...

  7. Ubuntu安装配置Mysql

      三种安装方式: 1. 从网上安装 sudo apt-get install mysql-server.装完已经自动配置好环境变量,可以直接使用mysql的命令. 注:建议将/etc/apt/sou ...

  8. MVC linq语法分页

    分页效果图: 表格下面的分页按钮样式是我自己做的一个样式,这4个按钮都是用同一张图片:这张图片是用ps做的. 接下来我们说一下怎么去做这个样式 第一css代码: ._HomePage,._Previo ...

  9. OSPF+LVS ,qugga,vconfig,...感觉这些很有想法啊

    将以前铁板一块的硬件拿来无限细分,路由器,交换机可灵活实现,SDN,NVF.硬盘可以分区,分区可以分布式块存储,操作系统可虚拟化,KVM OR LXC,网络可自由随时按需求定制更改配置. 操作系统支持 ...

  10. C++类型转换总结

    C风格的强制类型转换(Type Cast)很简单,不管什么类型的转换统统是:TYPE b = (TYPE)a.C++风格的类型转换提供了4种类型转换操作符来应对不同场合的应用. const_cast, ...