angular.js ng-repeat具有html内容的项目
我有很多学院,位置和密码详细信息,但我现在默认显示html内容.显示大学,地点和pincodes的列表.任何人都可以在plunker中向我展示示例
使用ng-repeat指令
- <body ng-app="task">
- <div ng-controller="AppCtrl" ng-cloak>
- <md-content class="md-padding">
- <div>
- <md-card-title layout="row" layout-align="start">
- <md-checkBox md-no-ink aria-label="" ng-model="data.cb5" class="md-default">
- </md-checkBox>
- <md-card-title-text layout="column">
- <span class="md-headline">Maturi venkata subbarao engg college</span>
- <span class="md-subhead">Nadergul,Hyderabad,Telangana 501510</span>
- </md-card-title-text>
- </md-card-title>
- </div>
- </md-content>
- </div>
解决方法
- var myApp = angular.module('myApp',[]);
- function MyCtrl($scope) {
- $scope.title = 'Welcome to see ng-repeat usage';
- $scope.myObj = [{
- college: 'Maturi',location: 'venkata subbarao engg college',pincode: 76003
- },{
- college: 'Nadergul',location: 'Hyderabad,Telangana',pincode: 501510
- },{
- college: 'LNCT',location: 'bhopal',pincode: 411001
- },{
- college: 'Imperial',location: 'Mumbai,India',pincode: 4110008
- }
- ];
- }
- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
- <body ng-app="myApp" ng-controller="MyCtrl">
- <div>
- {{title}}
- <div ng-repeat='obj in myObj'>
- College: {{obj.college}} Location: {{obj.location}} Pincode: {{obj.pincode}}
- <br />
- <span>----------------------------------</span>
- </div>
- </div>
- </body>
我为您创建了一个简单的演示:
https://jsfiddle.net/varunsukheja/tLy451fx/
ng-repeat的语法与for循环非常相似,比如对于nameList中的名称类似于ng-repeat =’nameList’中的名字