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


Posted in Javascript onMay 05, 2016

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

Javascript 相关文章推荐
javascript 进阶篇2 CSS XML学习
Mar 14 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
JavaScript多线程详解
Aug 12 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 Javascript
AngularJS实现星星等级评分功能
Sep 24 Javascript
vue插件vue-resource的使用笔记(小结)
Aug 04 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
Nov 09 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 Javascript
Vue实现跑马灯效果
May 25 Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 #Javascript
一分钟理解js闭包
May 04 #Javascript
学JavaScript七大注意事项【必看】
May 04 #Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
May 04 #Javascript
开启BootStrap学习之旅
May 04 #Javascript
JavaScript入门教程之引用类型
May 04 #Javascript
javascript和jquery实现用户登录验证
May 04 #Javascript
You might like
PHP自定义大小验证码的方法详解
2013/06/07 PHP
解析用PHP实现var_export的详细介绍
2013/06/20 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
浅谈php调用python文件
2019/03/29 PHP
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
js实现全屏漂浮广告移入光标停止移动
2013/12/02 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
vue-prop父组件向子组件进行传值的方法
2018/03/01 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
[05:03]2018DOTA2亚洲邀请赛主赛事首日回顾
2018/04/04 DOTA
Python采用raw_input读取输入值的方法
2014/08/18 Python
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
Python 实现随机数详解及实例代码
2017/04/15 Python
使用PyInstaller将python转成可执行文件exe笔记
2018/05/26 Python
PyTorch预训练的实现
2019/09/18 Python
Python中Flask-RESTful编写API接口(小白入门)
2019/12/11 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
Python面试题集
2012/03/08 面试题
心得体会范文
2014/01/04 职场文书
优秀员工表扬信
2014/01/17 职场文书
《逃家小兔》教学反思
2014/02/23 职场文书
加入学生会演讲稿
2014/04/24 职场文书
MySQL的表级锁,行级锁,排它锁和共享锁
2022/07/15 MySQL