Repeating HTML Elements: ng-repeat

---o0o---

Original link

• The ng-repeat directive clones HTML elements once for each item in a collection (in an array).

1. Repeats an array

 
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
 <ul>
  <li ng-repeat="x in names">
   {{ x }}
  </li>
 <ul>
</div>
 

• {{ x }}

2. Repeats an array of objects

 
<div ng-app="" ng-init="names=[
 {name:'Jani',country:'Norway'},
 {name:'Hege',country:'Sweden'},
 {name:'Kai',country:'Denmark'}]">
 <ul>
    <li ng-repeat="x in names">
      {{ x.name + ', ' + x.country }}
    </li>
 <ul>
</div>
 

Result:

• Jani, Norway
• Hege, Sweden
• Kai, Denmark

3. ng-repeat + ng-controller

 
<div ng-app="" ng-controller="namesController">
 <ul>
    <li ng-repeat="x in names">
      {{ x.name + ', ' + x.country }}
    </li>
 <ul>
</div>

<script src="namesController.js"></script>
 

In namesController.js file

 
function namesController($scope) {
 $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
 ];
}
 

Result:

• Jani, Norway
• Hege, Sweden
• Kai, Denmark