Angular.js中用ng-重复-开始实现自定义显示

前言

众所周知AngularJS中可以使用尼日利亚重复显示列表数据，这对大家来说应该都不陌生了，用起来很简单，也很方便，比如要显示一个产品表格控制器的爪哇岛描述语言代码如下：

angular.module('app '，[]).控制器(“我的控制器”，我的控制器)；我的控制器$ inject=[' $ scope ']；函数MyController($scope) { //要显示的产品列表数据；$scope.products=[ { id: 1，名称： '产品1 ',描述： '产品一描述}，{ id: 2，名称： '产品3 ',描述： '产品2描述}，{ id: 3，名称： '产品3 ',描述： '产品3描述'} ];}对应的超文本标记语言视图代码如下：

table class=' table ' tr thid/th name/th description/th/th/tr ng-repeat=' p in products ' TD/TD/TD/TD TDA href=' # ' Buy/a/TD/tr/table运行效果图：

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

每个产品占表格的两行，这样的效果用尼日利亚重复就没办法实现了。不过AngularJS提供了ng-重复-开始和尼日利亚重复结束来实现上面的需求，ng-重复-开始和尼日利亚重复结束的语法如下：

页眉ng-重复-开始='项目中的项目'页眉/页眉' div class='正文'正文/div页脚ng-重复-结束页脚/页脚假设提供了['A '，' B']两个产品，则生成的超文本标记语言结果如下：

表头A/表头div class='body '表体A/表尾页脚A/表尾表头B/表头div class='body '表体B/表尾页脚B/表尾了解了ng-重复-开始和尼日利亚重复结束的用法之后，上面要求的界面就很容易实现了，代码如下：

table class=' table-table-bordered ' tr ng-repeat-start=' p in products ' TD/TD行span=' 2 ' a href=' # ' Buy/a/TD/tr ng-repeat-end TD/TD/tr/table总结

以上就是Angular.js中利用ng-重复-开始实现自定义显示的全部内容，希望本文的内容对大家学习或者使用Angular.js能有所帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。