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 相关文章推荐
使用ExtJS技术实现的拖动树结点
Aug 05 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
Jan 21 Javascript
原生javascript兼容性测试实例
Jul 01 Javascript
固定表格行列(expression)在IE下适用
Jul 25 Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 Javascript
react-native fetch的具体使用方法
Nov 01 Javascript
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
koa大型web项目中使用路由装饰器的方法示例
Apr 02 Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
图文详解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
使用数据库保存session的方法
2006/10/09 PHP
ThinkPHP的L方法使用简介
2014/06/18 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
PHP chr()函数讲解
2019/02/11 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
网页图片延时加载的js代码
2010/04/22 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
jquery validate在ie8下的bug解决方法
2013/11/13 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
jQuery常用数据处理方法小结
2015/02/20 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
JS中的phototype详解
2017/02/04 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
Python装饰器的函数式编程详解
2015/02/27 Python
python万年历实现代码 含运行结果
2017/05/20 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
pytorch对可变长度序列的处理方法详解
2018/12/08 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
SpringBoot实现登录注册常见问题解决方案
2020/03/04 Python
CSS3中文字镂空、透明值、阴影效果设置示例小结
2016/03/07 HTML / CSS
美国玛丽莎收藏奢华时尚商店:Marissa Collections
2016/11/21 全球购物
英国床垫在线:Mattress Online
2016/12/07 全球购物
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
专科生就业求职信
2014/06/22 职场文书
民政局个人整改措施
2014/09/24 职场文书
大学生毕业评语
2014/12/31 职场文书
活动新闻稿范文
2015/07/17 职场文书
技术转让协议书
2016/03/19 职场文书
pytorch fine-tune 预训练的模型操作
2021/06/03 Python