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 相关文章推荐
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
Sep 22 Javascript
JQuery实现的在新窗口打开链接的方法小结
Apr 22 Javascript
单击复制文字兼容各浏览器的完美解决方案
Jul 04 Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 Javascript
jQuery居中元素scrollleft计算方法示例
Jan 16 Javascript
JavaScript判断浏览器及其版本信息
Jan 20 Javascript
利用NPM淘宝的node.js镜像加速nvm
Mar 27 Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 Javascript
ES2020让代码更优美的运算符 (?.) (??)
Jan 04 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函数重载的替代方法--伪重载详解
2015/05/08 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
jquery tools 系列 scrollable学习
2009/09/06 Javascript
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
使用js操作cookie的一点小收获分享
2013/09/03 Javascript
javascript中this的四种用法
2015/05/11 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
使用BootStrapValidator完成前端输入验证
2016/09/28 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
JavaScript实现动态添加Form表单元素的方法示例
2017/08/14 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
Python中几种操作字符串的方法的介绍
2015/04/09 Python
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
21行Python代码实现拼写检查器
2016/01/25 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
Python算法之图的遍历
2017/11/16 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
Python csv模块使用方法代码实例
2019/08/29 Python
Python 切分数组实例解析
2019/11/07 Python
python创建ArcGIS shape文件的实现
2019/12/06 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
解释一下抽象方法和抽象类
2016/08/27 面试题
雅虎笔试题(字符串操作)
2015/03/24 面试题
银行领导班子四风对照检查材料
2014/09/27 职场文书
2015年团支部工作总结
2015/04/03 职场文书