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代码
May 11 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
May 09 Javascript
JS简单获取及显示当前时间的方法
Aug 03 Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
js实现横向拖拽导航条功能
Feb 17 Javascript
js常用的继承--组合式继承
Mar 06 Javascript
vue-cli+webpack项目 修改项目名称的方法
Feb 28 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
Mar 24 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
Apr 14 Javascript
Vue自定义组件双向绑定实现原理及方法详解
Sep 03 Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
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中的加密功能
2006/10/09 PHP
PHP 彩色文字实现代码
2009/06/29 PHP
php笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
Ext面向对象开发实践(续)
2008/11/18 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
Python 一句话生成字母表的方法
2019/01/02 Python
带你认识Django
2019/01/15 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
pandas 对group进行聚合的例子
2019/12/27 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
python 实现字符串下标的输出功能
2020/02/13 Python
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
2013/06/20 HTML / CSS
诗狄娜化妆品官方网站:Stila Cosmetics
2016/12/21 全球购物
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
先进员工事迹材料
2014/12/20 职场文书
pytorch 如何使用batch训练lstm网络
2021/05/28 Python
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL