javascript – 如何使用ng-repeat:Angularjs?

前端之家收集整理的这篇文章主要介绍了javascript – 如何使用ng-repeat:Angularjs?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
angular.js ng-repeat具有html内容的项目

我有很多学院,位置和密码详细信息,但我现在默认显示html内容.显示大学,地点和pincodes的列表.任何人都可以在plunker中向我展示示例

使用ng-repeat指令

  1. <body ng-app="task">
  2. <div ng-controller="AppCtrl" ng-cloak>
  3. <md-content class="md-padding">
  4. <div>
  5. <md-card-title layout="row" layout-align="start">
  6. <md-checkBox md-no-ink aria-label="" ng-model="data.cb5" class="md-default">
  7. </md-checkBox>
  8. <md-card-title-text layout="column">
  9. <span class="md-headline">Maturi venkata subbarao engg college</span>
  10. <span class="md-subhead">Nadergul,Hyderabad,Telangana 501510</span>
  11. </md-card-title-text>
  12. </md-card-title>
  13. </div>
  14. </md-content>
  15. </div>

解决方法

  1. var myApp = angular.module('myApp',[]);
  2.  
  3. function MyCtrl($scope) {
  4. $scope.title = 'Welcome to see ng-repeat usage';
  5. $scope.myObj = [{
  6. college: 'Maturi',location: 'venkata subbarao engg college',pincode: 76003
  7. },{
  8. college: 'Nadergul',location: 'Hyderabad,Telangana',pincode: 501510
  9. },{
  10. college: 'LNCT',location: 'bhopal',pincode: 411001
  11. },{
  12. college: 'Imperial',location: 'Mumbai,India',pincode: 4110008
  13. }
  14. ];
  15. }
  1. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  2.  
  3. <body ng-app="myApp" ng-controller="MyCtrl">
  4. <div>
  5. {{title}}
  6. <div ng-repeat='obj in myObj'>
  7. College: {{obj.college}} Location: {{obj.location}} Pincode: {{obj.pincode}}
  8. <br />
  9. <span>----------------------------------</span>
  10. </div>
  11. </div>
  12. </body>

我为您创建了一个简单的演示:
https://jsfiddle.net/varunsukheja/tLy451fx/

ng-repeat的语法与for循环非常相似,比如对于nameList中的名称类似于ng-repeat =’nameList’中的名字

猜你在找的JavaScript相关文章