Angular.js中用ng-repeat-start实现自定义显示
程序员文章站
2022-06-01 18:41:29
前言
众所周知angularjs 中可以使用 ng-repeat 显示列表数据,这对大家来说应该都不陌生了, 用起来很简单, 也很方便, 比如要显示一个产品表格, con...
前言
众所周知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>
运行效果图:
可是如果全部页面都是每个产品占一行来显示, 未免太枯燥了, 比如用户希望这样子自定义显示:
每个产品占表格的两行, 这样的效果用 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-start
和 ng-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能有所帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。
推荐阅读
-
vue实现密码显示与隐藏按钮的自定义组件功能
-
Android自定义多节点进度条显示的实现代码(附源码)
-
Excel用自定义格式配合条件格式实现输入数字显示汉字且不限个数
-
Vue实现用户自定义字段显示数据的方法
-
Excel中用MID函数或自定义格式实现只保留日期中的部分如月日时
-
DevExpress的TreeList实现显示本地文件目录并自定义右键实现删除与重命名文件
-
Android自定义View设定到FrameLayout布局中实现多组件显示的方法 分享
-
PopupWindow自定义位置显示的实现代码
-
Android自定义View之RadioGroup实现跨多行显示
-
Android自定义View实现地铁显示牌效果