文档章节

AngularJS入门(用ng-repeat指令实现循环输出)

foodon
 foodon
发布于 2014/10/30 08:57
字数 401
阅读 119561
收藏 11

循环输出列表很多项目在web服务端做,前端做好模版后后端写jsp代码,双方需要紧密合作,分清责任。有些项目由后端提供restful方法,前端用ajax调用自己循环,这种一般是大把的jquery拼字符串,太不直观,有人搞出了js模板,也没好到哪里去。

用AngularJS就爽多了,语法和JSP类似:

<!doctype html>
<html ng-app>
<head>
    <meta charset="utf-8">
    <title>ng-repeat directive</title>
</head>
<body>
<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="../lib/angularjs/1.2.26/angular.min.js"></script>
<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}
        ];

        $scope.remove = function (index) {
            $scope.items.splice(index, 1);
        }
    }
</script>
</body>
</html>



ng-repeat指令生命在需要循环内容的元素上,items和控制器上的变量名对应,item是为数组中单个对象起的别名。$index可以返回当前引用对象的序号,从0开始,另外还有$first、$middle、$last可以返回布尔值,用于告诉你当前元素是否是集合中的第一个中间的最后一个元素。



© 著作权归作者所有

foodon
粉丝 60
博文 56
码字总数 27005
作品 0
海淀
技术主管
私信 提问
加载中

评论(3)

foodon
foodon

引用来自“yingtao”的评论

你用的什么编辑器啊?

回复@yingtao : notepad++,现在基本做后端,IDEA了
yingtao
yingtao
你用的什么编辑器啊?
pennymei
pennymei
OneAPM Browser Insight是一个基于真实用户的 Web 前端性能监控平台,可以定位网站性能瓶颈,网站加速效果可视化;支持浏览器、微信、App 浏览 HTML 和 HTML5 页面。可以在官网注册体验哦~
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
0
0
Angular.js-开发前笔记

angular.js 类库下载地址 http://www.runoob.com/try/angularjs/1.2.5/angular.min.js 功能: AngularJS 把应用程序数据绑定到 HTML 元素。 绑出数据 AngularJS 可以克隆和重复 HTML 元素。 ...

透笔度
2015/08/06
0
0
再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

Angular 的数据绑定采用什么机制,详述原理? 脏检查机制。阐释脏检查机制,必须先了解如下问题。 单向绑定(ng-bind) 和 双向绑定(ng-model) 的区别? ng-bind 单向数据绑定($scope ->...

634117608
2018/04/19
0
0
ng-animate和ng-cookies用法

———ng-animate 本文讲一下Angular中动画应用的部分。 首先,Angular本生不提供动画机制,需要在项目中加入Angular插件模块ngAnimate才能完成Angular的动画机制,Angular也不提供具体的动画...

sidney_c
2018/04/15
0
0
angular.animation的使用

overview angular-animate.js插件可以对,,,,,,,,,,等指令提供CSS3或者JS动画效果,这些指令分别两个梯队: 梯队一:DOM节点会被remove的梯队:if,view,repeat,include,switch 梯队二:DOM节点...

前端届的科比
2015/11/15
0
1

没有更多内容

加载失败,请刷新页面

加载更多

kubernetes API 访问控制在阿里云容器服务(ACK)上的实践

提起K8s API的访问控制,很多同学应该都会想到RBAC,这是K8s用来做权限控制的方法,但是K8s对API的访问控制却不止于此,今天我们就来简单介绍下K8s的访问控制以及ACK如何利用这套方法提供便捷...

zhaowei121
28分钟前
1
0
从HelloWorld看Knative Serving代码实现

概念先知 官方给出的这几个资源的关系图还是比较清晰的: 1.Service: 自动管理工作负载整个生命周期。负责创建route,configuration以及每个service更新的revision。通过Service可以指定路由流...

迷你芊宝宝
28分钟前
1
0
如何防止http请求数据被篡改

故事的开始,面试官问了我一个问题: 如何防止http请求中数据被篡改? 回答: 1.设置客户端IP黑/白名单 1.1.客户端所有请求,请求到代理服务器(nginx),代理服务器维护黑/白名单的ip,决定是...

太猪-YJ
33分钟前
2
0
好程序员大数据笔记之:Hadoop集群搭建

在学习大数据的过程中,我们接触了很多关于Hadoop的理论和操作性的知识点,尤其在近期学习的Hadoop集群的搭建问题上,小细节,小难点拼频频出现,所以,今天集中总结以下笔记,希望对各位同学...

好程序员IT
40分钟前
1
0
MySql用navcat连接时报错 2509

在8版本以后的MySql默认的加密方式都改为了caching_sha2_password 因此进入mysql的命令行更改加密方式即可 ALTER USER 'root'@'localhost' IDENTIFIED BY 'password' PASSWORD EXPIRE NEVER......

lanyu96
42分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部