AngularJs学习之ng-repeat-start,ng-repeat-end 指令
生活随笔
收集整理的這篇文章主要介紹了
AngularJs学习之ng-repeat-start,ng-repeat-end 指令
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
1 ng-repeat指令: 循環(huán)輸出數(shù)組或者對(duì)象內(nèi)容到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: "慕容復(fù)",content: "金庸武俠悲劇人物，曾與主角喬峰大戰(zhàn)百余回合而未落敗。"},{name: "張無忌",content: "金庸武俠一代傳奇高手，擅長九陽神功以及乾坤大挪移。"},{name: "慕容復(fù)",content: "金庸武俠悲劇人物，曾與主角喬峰大戰(zhàn)百余回合而未落敗。"},{name: "張無忌",content: "金庸武俠一代傳奇高手，擅長九陽神功以及乾坤大挪移。"},];});</script> </body> </html>頁面： 一條數(shù)據(jù)占一行，如果分行顯示則不容易實(shí)現(xiàn)。
2 、 ng-repeat-start ng-repeat-end指令: 將數(shù)組或?qū)ο蟮囊粭l數(shù)據(jù)分行顯示。
<!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: "慕容復(fù)",content: "金庸武俠悲劇人物，曾與主角喬峰大戰(zhàn)百余回合而未落敗。"},{name: "張無忌",content: "金庸武俠一代傳奇高手，擅長九陽神功以及乾坤大挪移。"},{name: "慕容復(fù)",content: "金庸武俠悲劇人物，曾與主角喬峰大戰(zhàn)百余回合而未落敗。"},{name: "張無忌",content: "金庸武俠一代傳奇高手，擅長九陽神功以及乾坤大挪移。"},];});</script> </body> </html>頁面：實(shí)現(xiàn)分行顯示一條數(shù)據(jù)。
參數(shù)結(jié)構(gòu)：
[{"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-borderedtheadtrth 分層th 分桶th 參數(shù)值tbodytr(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}}轉(zhuǎn)載于:https://my.oschina.net/u/2391658/blog/2052274
《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結(jié)
以上是生活随笔為你收集整理的AngularJs学习之ng-repeat-start,ng-repeat-end 指令的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： unity3d UGUI Scroll
- 下一篇： 如何快速解决繁杂的国际化替换