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 相关文章推荐
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
Jquery easyui 实现动态树
Nov 17 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
laravel5.4+vue+element简单搭建的示例代码
Aug 29 Javascript
AngularJS中下拉框的基本用法示例
Oct 11 Javascript
jQuery滑动效果实现方法分析
Sep 05 jQuery
Vue中插入HTML代码的方法
Sep 21 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
vue 集成jTopo 处理方法
Aug 07 Javascript
基于js实现逐步显示文字输出代码实例
Apr 02 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 方便水印和缩略图的图形类
2009/05/21 PHP
Windows下的PHP安装文件线程安全和非线程安全的区别
2014/04/23 PHP
php+mysql数据库查询实例
2015/01/21 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
获取Javscript执行函数名称的方法
2006/12/22 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
2017/04/27 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
2017/07/04 jQuery
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
[01:56]林书豪DOTA2上海特级锦标赛励志短片
2016/03/05 DOTA
使用python 获取进程pid号的方法
2014/03/10 Python
python之super的使用小结
2018/08/13 Python
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
AmazeUI 列表的实现示例
2020/08/17 HTML / CSS
优秀中学生事迹材料
2014/01/31 职场文书
决心书标准格式
2014/03/11 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
民主评议党员工作总结
2014/10/20 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
Django实现聊天机器人
2021/05/31 Python
Win11任务栏太宽了怎么办?一招解决Win11任务栏太宽问题
2021/11/21 数码科技
Go web入门Go pongo2模板引擎
2022/05/20 Golang