Java, .NET, PHP, PYTHON, ANGULAR, .NET, ML, Data Scince, Testing, CI Tutorials in Easy Languages.

"Best Software Training, Internship, Project Development center of Indore India, Helpline 780506-3968"

 ng-repeat of Angular JS:-

It is used to display Array or JSON data similar to foreach loop of  Java.

We will mostly bind tables, drop-down lists, and Listbox data using ng-repeat.


Syntax of  ng-repeat

<tr ng-repeat="var in source"> <td>var</td> </tr>



Example of ng-repeat to bind data in the dropdown list :-


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="a">
   
<option ng-repeat="item in arr" value="{{item}}">{{item}}</option>

</select>

{{a}}
</div>

<script>
angular.module('myApp',[]).controller('myCtrl',function($scope){

    $scope.arr = ["C","CPP","DS","JAVA",".NET","PHP"];

})


</script>  

</body>
</html>

.............................................................................................................

Q Another Example of ng-repeat of angular  JS using JSON?

JSON means Javascript Object notation, it is used to display data using key=>value pair.

JSON Use [] and  { }  to store element.

[]   --->  it contain multiple element

{} ----> Object



Single row  --->   {'rno':1001,'sname':'xyz'}

Multiple row----->    [ {'rno':1002,'sname':'xyz'}, {'rno':1001,'sname':'xyz'}, {'rno':1001,'sname':'xyz'}, {'rno':1001,'sname':'xyz'}]


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">

<table border="1">
   
<tr ng-repeat="item in arr"><td>{{item.rno}}</td><td>{{item.sname}}</td></tr>

</table>


</div>

<script>
angular.module('myApp',[]).controller('myCtrl',function($scope){

    $scope.arr =   [ {'rno':1002,'sname':'xyz'}, {'rno':1001,'sname':'xyz'}, {'rno':1003,'sname':'mno'}, {'rno':1004,'sname':'klmn'}];

})


</script>   

</body>
</html>





Post a Comment

If you have any doubt in programming or join online classes then you can contact us by comment .

Previous Post Next Post