AngularJS入门（用ng-repeat指令实现循环输出）

为什么80%的码农都做不了架构师？>>>

循环输出列表很多项目在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可以返回布尔值，用于告诉你当前元素是否是集合中的第一个中间的最后一个元素。

转载于:https://my.oschina.net/foodon/blog/338698

AngularJS入门（用ng-repeat指令实现循环输出）相关推荐

跟我学AngularJs:AngularJs入门及第一个实例
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:主要给大家介绍了AngularJs及其特性,并以3个实例来做说明. 本教程使用Angul ...
AngularJS 入门6-路由
AngularJS 入门6-路由 AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 这个NG的路由模块可以实现带有多视图的单页面开发实例: //HTML ...
AngularJS入门心得2——何为双向数据绑定
前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...
AngularJS入门心得1——directive和controller如何通信
粗略地翻了一遍<JavaScript DOM编程艺术>,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too Simple!(刚打照面的时候 ...
《AngularJS入门与进阶》图书简介
一.图书封面二.图书CIP信息图书在版编目(CIP)数据 AngularJS入门与进阶 / 江荣波著. – 北京 : 清华大学出版社, 2017 ISBN 978-7-302-46074-9 Ⅰ. ...
AngularJs学习之ng-repeat-start,ng-repeat-end 指令
2019独角兽企业重金招聘Python工程师标准>>> 1 ng-repeat指令: 循环输出数组或者对象内容到html <!DOCTYPE html> <html ...
Vue学习（入门实例、常用指令）-学习笔记
文章目录 Vue学习(入门实例.常用指令)-学习笔记实例常用指令 v-on v-bind v-for v-html v-if event v-model 双向数据绑定实现 - defineProp ...
Java入门之顺序、选择、循环结构
Java入门之顺序.选择.循环结构顺序结构: package com.LynnStudy.scanner; import java.util.Scanner; /*** @Author hql* @ ...
oracle sql循环判断语句怎么写,Oracle 非常详细的 PL/SQL入门教程,PL/SQL语法格式/循环语句/条件判断/异常处理...
PL/SQL入门教程目录 Oracle PL/SQL入门教程,PL/SQL语法格式/循环语句/条件判断/异常处理一.PL/SQL简介 1.PL/SQL简介 1.PL/SQl是过程语言PL与结构化语言 ...

AngularJS入门（用ng-repeat指令实现循环输出）

AngularJS入门（用ng-repeat指令实现循环输出）相关推荐

最新文章

热门文章