AngularJs 学习之 ng-repeat-start,ng-repeat-end 指令 淡淡的烟草味﹌ 2024-05-23 22:26 1阅读 0赞 ## AngularJs 学习之 ng-repeat-start,ng-repeat-end 指令 ## ### ng-repeat 指令：循环输出数组或者对象内容到 html ### * <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>apply watch</title> <link rel="stylesheet" type="text/css" href="css/lib/bootstrap.css"> <script src="js/lib/angular.min.js"></script> <style type="text/css"> *{margin: 0;padding: 0;} </style> </head> <body ng-app="myApp" ng-controller="myCtrl"> <div class="container-fluid"> <table class="table table-striped"> <thead> <tr> <th>姓名</th> <th>介绍</th> </tr> </thead> <tbody> <tr ng-repeat="item in list"> <td>{ {item.name}}</td> <td>{ {item.content}}</td> </tr> </tbody> </table> </div> <script type="text/javascript"> var app = angular.module("myApp",[]); app.controller('myCtrl', function($scope) { $scope.list = [ {name: "慕容复",content: "金庸武侠悲剧人物，曾与主角乔峰大战百余回合而未落败。"}, {name: "张无忌",content: "金庸武侠一代传奇高手，擅长九阳神功以及乾坤大挪移。"}, {name: "慕容复",content: "金庸武侠悲剧人物，曾与主角乔峰大战百余回合而未落败。"}, {name: "张无忌",content: "金庸武侠一代传奇高手，擅长九阳神功以及乾坤大挪移。"}, ]; }); </script> </body> </html> * 页面： 一条数据占一行，如果分行显示则不容易实现。 * ![在这里插入图片描述][0142119c8b4148e292f5066df093295b.png] ### ng-repeat-start ng-repeat-end 指令：将数组或对象的一条数据分行显示。 ### * <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>apply watch</title> <link rel="stylesheet" type="text/css" href="css/lib/bootstrap.css"> <script src="js/lib/angular.min.js"></script> <style type="text/css"> *{margin: 0;padding: 0;} </style> </head> <body ng-app="myApp" ng-controller="myCtrl"> <div class="container-fluid"> <table class="table table-striped"> <tbody> <tr ng-repeat-start="item in list"> <td>姓名</td> <td>{ {item.name}}</td> </tr> <tr ng-repeat-end> <td></td> <td>{ {item.content}}</td> </tr> </tbody> </table> </div> <script type="text/javascript"> var app = angular.module("myApp",[]); app.controller('myCtrl', function($scope) { $scope.list = [ {name: "慕容复",content: "金庸武侠悲剧人物，曾与主角乔峰大战百余回合而未落败。"}, {name: "张无忌",content: "金庸武侠一代传奇高手，擅长九阳神功以及乾坤大挪移。"}, {name: "慕容复",content: "金庸武侠悲剧人物，曾与主角乔峰大战百余回合而未落败。"}, {name: "张无忌",content: "金庸武侠一代传奇高手，擅长九阳神功以及乾坤大挪移。"}, ]; }); </script> </body> </html> * 页面：实现分行显示一条数据。 * ![在这里插入图片描述][9cd3930a830c4189aaaf9d078c8a7f3a.png] * 参数结构： * [ { "layerId": "5569", "layerName": "layer0", "experiments": [ { "layerId": 5569, "layerName": "layer0", "experimentId": 15027, "experimentName": "exp123", "pVal": "a", "pName": "p1" }, { "layerId": 5569, "layerName": "layer0", "experimentId": 15028, "experimentName": "exp124", "pVal": "a", "pName": "p1" } ] }, { "layerId": "5621", "layerName": "layer1", "experiments": [ { "layerId": 5621, "layerName": "layer1", "experimentId": 15171, "experimentName": "exp002", "pVal": "a", "pName": "p1" } ] } ] * table.table.table-striped.table-hover.table-grid.table-bordered thead tr th 分层 th 分桶 th 参数值 tbody tr(ng-repeat-start="layer0 in result.data track by $index") td(rowspan="{ {layer0.experiments.length}}") { {layer0.layerName}}\#{ {layer0.layerId}} td { {layer0.experiments[0].experimentName}}\#{ {layer0.experiments[0].experimentId}} td { {layer0.experiments[0].pName}}={ {layer0.experiments[0].pVal}} tr(ng-repeat-end ng-repeat="expt in layer0.experiments track by $index" ng-if="$index!=0") td { {expt.experimentName}}\#{ {expt.experimentId}} td { {expt.pName}}={ {expt.pVal}} * ![cd509ce86943f97465380dd81085759bf9e.jpg][] [0142119c8b4148e292f5066df093295b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/9e2f8bd95ad149298f844ce515397cc7.png [9cd3930a830c4189aaaf9d078c8a7f3a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/9e64cf73df894f7f82fe168ca2b86fc7.png [cd509ce86943f97465380dd81085759bf9e.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/d16aeb98a0a4431a80c9fa8ac7cdc408.jpeg
还没有评论，来说两句吧...