All geek questions in one place

How to use ng-repeat: Angularjs?

angular.js ng-repeat elements with html content

I have many colleges, location and pincode details, but now I display html content by default. Show a list of colleges, places and pincodes.Can, someone will show me an example in plunker

Using the 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
source share
6 answers

 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 created a simple demo for you: https://jsfiddle.net/varunsukheja/tLy451fx/

ng-repeat has very similar loop syntax, e.g. for name in nameList similar to ng-repeat='name in nameList'

+3
source

You have variables in your controller as shown 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>

See the white paper for more information. AngularJS Repeat

+8
source

Add 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>
+4
source

Hope this helps 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>
+4
source

Please visit: https://docs.angularjs.org/api/ng/directive/ngRepeat

and possibly: 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 is to repeat the same html tag for all elements of the collection. I like also | Sort by. The pipe (|) is applied to the previous object (collection). In the example, we apply orderBy 'id' to the collection. If you need to access the latter in your code, filtered data usually uses "like filterResult", once you have declared it, you can access your filter.Result object in your app.js.

BTW. It is very similar to @foreach in Laravel / ASPNET-CSHTML or .enter () in d3js

+2
source

If you want to repeat, for example, 10 times, define in the controller

 $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 the html code <span ng-repeat="arr in array" class="md-headline">Maturi venkata subbarao engg college</span>

+1
source

Source: https://habr.com/ru/post/1014730/

More articles:


All Articles