How to use ng-repeat:Angularjs?
Question
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>
6 answers
solution1
8 2017-08-16 07:39:34
Consider you have variables in your controller as below, ie
$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
solution2
4 2017-02-06 12:12:05
Add the ng-repeat as below,
<body ng-app="task">
<div ng-controller="AppCtrl" ng-cloak>
<md-content class="md-padding">
<div ng-repeat="item in dataItems">
<md-card-title layout="row" layout-align="start">
<md-checkbox md-no-ink aria-label="" ng-model="item.cb5" class="md-default">
</md-checkbox>
<md-card-title-text layout="column">
<span class="md-headline">{{item.Name}}</span>
<span class="md-subhead">{{item.location}}</span>
</md-card-title-text>
</md-card-title>
</div>
</md-content>
</div>
solution3
4 ACCPTED 2017-08-20 20:38:47
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'
solution4
3 2017-08-21 07:30:10
I hope It will help you.
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.clg_info = [ {name: 'College 1', location:'Location 1', pincode:'499949'}, {name: 'College 2', location:'Location 2', pincode:'373737'}, {name: 'College 3', location:'Location 3', pincode:'499949'}, {name: 'College 4', location:'Location 4', pincode:'373737'}] });
<html lang="en"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.js" ></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.css" /> </head> <body ng-app="myApp"> <div ng-controller="myCtrl"> <div ng-repeat ="clg in clg_info"> <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">{{clg.name}}</span> <span class="md-subhead">{{clg.location}}, {{clg.pincode}}</span> </md-card-title-text> </md-card-title> </div> </div> </body> </html>
solution5
2 2017-08-22 14:22:48
Please visit: https://docs.angularjs.org/api/ng/directive/ngRepeat
and perhaps: http://embed.plnkr.co/Rbj3pw/ http://jsfiddle.net/razh/3mwjr/
<div ng-repeat="model in collection | orderBy: 'id' as filtered_result">
{{model.name}}
</div>
The idea behind is to repeat the same html tag for all items in the collection. I like also the | orderBy. The pipe(|) applies to the previous object(collection). In the example we apply a orderBy 'id' to the collection. If you need to access later in your code the filtered data it is common to use the "as filteredResult", once you declared it you can access in your app.js the object filteredResult.
BTW. It is very similar to the @foreach in Laravel/ASPNET-CSHTML or the .enter() in d3js
solution6
1 2017-02-06 12:16:30
If you want to repeat for example 10 times, in your controller define
$scope.num_of_repeat = 10;
$scope.array = {};
var i = 0;
for (i=0;i<$scope.num_of_repeat-1;i++)
{
$scope.array[i] = i;
}
in html code <span ng-repeat="arr in array" class="md-headline">Maturi venkata subbarao engg college</span>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.