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 相关文章推荐
基于jquery封装的一个js分页
Nov 15 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 Javascript
node.js中的favicon.ico请求问题处理
Dec 15 Javascript
javascript实现在线客服效果
Jul 15 Javascript
JavaScript脚本判断蜘蛛来源的方法
Sep 22 Javascript
快速掌握Node.js环境的安装与运行方法
Feb 16 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
ES6解构赋值的功能与用途实例分析
Oct 31 Javascript
js删除数组中某几项的方法总结
Jan 16 Javascript
JavaScript实现京东放大镜效果
Dec 03 Javascript
jquery实现吸顶导航效果
Jan 08 jQuery
图文详解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作的文本留言本的例子(六)
2006/10/09 PHP
PHP关联链接常用代码
2012/11/05 PHP
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
php 常用算法和时间复杂度
2013/07/01 PHP
php实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
smarty获得当前url的方法分享
2014/02/14 PHP
php版微信发红包接口用法示例
2016/09/23 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
Javascript继承(上)——对象构建介绍
2012/11/08 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
jQuery插件jPaginate实现无刷新分页
2015/05/04 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
jQuery的层级查找方式分析
2016/06/16 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
BootstrapTable refresh 方法使用实例简单介绍
2017/02/20 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
JavaScript实现更换背景图片
2019/10/18 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
2019/10/28 Javascript
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
python动态监控日志内容的示例
2014/02/16 Python
Python将多个excel表格合并为一个表格
2021/02/22 Python
numpy linalg模块的具体使用方法
2019/05/26 Python
ubuntu上安装python的实例方法
2019/09/30 Python
Anaconda之conda常用命令介绍(安装、更新、删除)
2019/10/06 Python
详解python环境安装selenium和手动下载安装selenium的方法
2020/03/17 Python
使用jupyter notebook将文件保存为Markdown,HTML等文件格式
2020/04/14 Python
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
幼儿园户外活动总结
2014/07/04 职场文书
个人违纪检讨书
2014/09/15 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书
Mysql Online DDL的使用详解
2021/05/20 MySQL
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python