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>

Set ng-repeat on the element you want to repeat. Probably something like <div ng-repeat="item in items"><md-card-title>..</div>. Please read the documentation — devqon
– devqon, Commented Feb 6, 2017 at 12:06

Karthik RP · Accepted Answer · 2017-08-16 07:45:54Z

8

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

edited Aug 16, 2017 at 7:45

answered Aug 16, 2017 at 7:39

Karthik RP

1,0781 gold badge16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ramesh Rajendran · Accepted Answer · 2017-08-22 11:36:27Z

4

+50

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'

edited Aug 22, 2017 at 11:36

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

answered Aug 20, 2017 at 20:38

Varun Sukheja

6,6748 gold badges67 silver badges102 bronze badges

2 Comments

Nathan Tuggy Over a year ago

Rather than relying on an external site, you should include the demo here, perhaps as a Stack Snippet.

Varun Sukheja Over a year ago

Thanks @ Nathan Tuggy will do the same.

Neerajkumar R · Accepted Answer · 2017-02-06 12:12:05Z

4

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>

answered Feb 6, 2017 at 12:12

Neerajkumar R

841 silver badge5 bronze badges

Comments

Bhoomi Bhalani · Accepted Answer · 2017-08-22 12:41:14Z

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>

Martin Lietz · Accepted Answer · 2017-08-22 14:22:48Z

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

Abhisek Bera · Accepted Answer · 2017-02-06 12:16:30Z

1

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>

answered Feb 6, 2017 at 12:16

Abhisek Bera

1961 silver badge10 bronze badges

Collectives™ on Stack Overflow

How to use ng-repeat:Angularjs?

6 Answers 6

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related