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 相关文章推荐
jquery自动完成插件(autocomplete)应用之PHP版
Dec 15 Javascript
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
js 验证身份证信息有效性
Mar 28 Javascript
用unescape反编码得出汉字示例
Apr 24 Javascript
js中的getAttribute方法使用示例
Aug 01 Javascript
vuex学习之Actions的用法详解
Aug 29 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
ES6 let和const定义变量与常量的应用实例分析
Jun 27 Javascript
vue el-table实现自定义表头
Dec 11 Javascript
JavaScript Event Loop相关原理解析
Jun 10 Javascript
原生JavaScript实现弹幕组件的示例代码
Oct 12 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字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
PHP 字符串长度判断效率更高的方法
2014/03/02 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
php封装的验证码类分享
2017/02/26 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
php中如何执行linux命令详解
2018/11/06 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
2013/12/04 Javascript
Node.js模块加载详解
2014/08/16 Javascript
jQuery选择id属性带有点符号元素的方法
2015/03/17 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
js 模仿锚点定位的实现方法
2016/11/19 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
AngularJs中$cookies简单用法分析
2019/05/30 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
利用PHP实现递归删除链表元素的方法示例
2020/10/23 Javascript
python 七种邮件内容发送方法实例
2014/04/22 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
canvas之万花筒效果的简单实现(推荐)
2016/08/16 HTML / CSS
Hunter Boots美国官方网站:赫特威灵顿雨靴
2018/06/16 全球购物
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
关于旷工的检讨书
2014/02/02 职场文书
中学生自我鉴定
2014/02/04 职场文书
营销总监岗位职责范本
2014/02/26 职场文书
人力管理专业毕业生求职信
2014/02/27 职场文书
商铺消防安全责任书
2014/07/29 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android