Menu
angular.js ng-repeat items with html content
I have many colleges,location and pincode details but i'm showing now by default html content .how to show list of colleges ,locations and pincodes.Can anyone show me the example in plunker
Using ng-repeat directive
<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>
940
Consider you have variables in your controller as below, i.e
$scope.college_data = [{name: 'College 1', location:'Location 1', pincode:'499949'}, {name: 'College 2', location:'Location 2', pincode:'373737'}]
This is what you would do.,
<body ng-app="task">
<div ng-controller="AppCtrl" ng-cloak>
<md-content class="md-padding">
<div ng-repeat="college in college_data">
<md-card-title layout="row" layout-align="start">
<md-checkbox md-no-ink aria-label="" ng-model="college.cb5" class="md-default">
</md-checkbox>
<md-card-title-text layout="column">
<span class="md-headline">{{college.name}}</span>
<span class="md-subhead">{{college.location}}, {{college.pincode}}</span>
</md-card-title-text>
</md-card-title>
</div>
</md-content>
Check the official document for more info. AngularJS Repeat
97
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>I have created a simple demo for you: https://jsfiddle.net/varunsukheja/tLy451fx/
ng-repeat has syntax very similar to for loop, like
for name in nameList
similarly ng-repeat='name in nameList'
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
