Angular.js中用ng-repeat-start实现自定义显示


Posted in Javascript onOctober 18, 2016

前言

众所周知AngularJS 中可以使用 ng-repeat 显示列表数据,这对大家来说应该都不陌生了, 用起来很简单, 也很方便, 比如要显示一个产品表格, Controller 的 Javascript 代码如下:

angular.module('app', [])
.controller('MyController', MyController);

MyController.$inject = ['$scope'];
function MyController($scope) {
 // 要显示的产品列表数据;
 $scope.products = [
  {
   id: 1,
   name: 'Product 1',
   description: 'Product 1 description.'
  },
  {
   id: 2,
   name: 'Product 3',
   description: 'Product 2 description.'
  },
  {
   id: 3,
   name: 'Product 3',
   description: 'Product 3 description.'
  }
 ];
}

对应的 HTML 视图代码如下:

<table class="table">
  <tr>
   <th>id</th>
   <th>name</th>
   <th>description</th>
   <th>action</th>
  </tr>
  <tr ng-repeat="p in products">
   <td></td>
   <td></td>
   <td></td>
   <td><a href="#">Buy</a></td>
  </tr>
 </table>

运行效果图:

Angular.js中用ng-repeat-start实现自定义显示

可是如果全部页面都是每个产品占一行来显示, 未免太枯燥了, 比如用户希望这样子自定义显示:

Angular.js中用ng-repeat-start实现自定义显示

每个产品占表格的两行, 这样的效果用 ng-repeat 就没办法实现了。 不过 AngularJS 提供了 ng-repeat-start ng-repeat-end 来实现上面的需求, ng-repeat-start ng-repeat-end 的语法如下:

<header ng-repeat-start="item in items">
  Header 
 </header>
 <div class="body">
  Body 
 </div>
 <footer ng-repeat-end>
  Footer 
 </footer>

假设提供了 ['A','B'] 两个产品, 则生成的 HTML 结果如下:

<header>
  Header A
 </header>
 <div class="body">
  Body A
 </div>
 <footer>
  Footer A
 </footer>
 <header>
  Header B
 </header>
 <div class="body">
  Body B
 </div>
 <footer>
  Footer B
 </footer>

了解了 ng-repeat-startng-repeat-end 的用法之后, 上面要求的界面就很容易实现了, 代码如下:

<table class="table table-bordered">
  <tr ng-repeat-start="p in products">
   <td></td>
   <td rowspan="2"><a href="#">Buy</a></td>
  </tr>
  <tr ng-repeat-end>
   <td></td>
  </tr>
 </table>

总结

以上就是Angular.js中利用ng-repeat-start实现自定义显示的全部内容,希望本文的内容对大家学习或者使用Angular.js能有所帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js 得到文件后缀(通过正则实现)
Jul 08 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
Aug 12 Javascript
jquery 取子节点及当前节点属性值
Jul 25 Javascript
node.js中的fs.truncateSync方法使用说明
Dec 15 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
jquery对复选框(checkbox)的操作汇总
Jan 13 Javascript
JS实现简单的二元方程计算器功能示例
Jan 03 Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 Javascript
JS实现移动端按首字母检索城市列表附源码下载
Jul 05 Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 Javascript
浅谈JavaScript中this的指向更改
Jul 28 Javascript
Bootstrap框架的学习教程详解(二)
Oct 18 #Javascript
微信小程序 教程之WXSS
Oct 18 #Javascript
微信小程序 教程之引用
Oct 18 #Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
Oct 18 #Javascript
微信小程序 教程之事件
Oct 18 #Javascript
微信小程序 教程之模板
Oct 18 #Javascript
微信小程序 教程之列表渲染
Oct 18 #Javascript
You might like
php 生成随机验证码图片代码
2010/02/08 PHP
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
php去除头尾空格的2种方法
2015/03/16 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
Django基础之Model操作步骤(介绍)
2017/05/27 Python
python中的闭包函数
2018/02/09 Python
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
py-charm延长试用期限实例
2019/12/22 Python
python绘制分布折线图的示例
2020/09/24 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
以色列的身体护理及家居香薰品牌:Sabon NYC
2018/02/23 全球购物
会计主管岗位职责范文
2013/11/08 职场文书
护理个人求职信范文
2014/01/08 职场文书
《三袋麦子》教学反思
2014/03/02 职场文书
英语教师自荐信
2014/05/26 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
影视后期实训报告
2014/11/05 职场文书
酒桌上的开场白
2015/06/01 职场文书
MySQL Threads_running飙升与慢查询的相关问题解决
2021/05/08 MySQL
Python 中的 copy()和deepcopy()
2021/11/07 Python
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技