Change loop execution in angular js

Question

Is there any way I can alternate the loop execution in the below HTML? I have 2 div elements to print the properties Name and Age. If I run the below code, It is printing the name first and Age second. This yields output like below:

John
Jessie
Johanna
25
30
28

There should not be any change in HTML. One div is for Name and another one is for Age.I want output like below.

John
25
Jessie
30
Johanna
28

Below is the HTML for sample which I created.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">

<div id="name" ng-repeat="x in friends">
{{x.name}}
</div>
<div id="name" ng-repeat="x in friends">

{{x.age}}
</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.friends = [
    {name:'John', age:25, gender:'boy'},
    {name:'Jessie', age:30, gender:'girl'},
    {name:'Johanna', age:28, gender:'boy'}
  ];
});
</script>

</body>
</html>

Thomas Negash · Accepted Answer · 2017-04-08 04:41:23Z

1

You can use ng-repeat-start and ng-repeat-end as the following.

<div id="name" ng-repeat-start="x in friends">
{{x.name}}
</div>
<div id="name" ng-repeat-end>
{{x.age}}
</div>

This will create the divs the way you wanted.

This will be the full code

  <!DOCTYPE html>
  <html>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

    <body ng-app="myApp" ng-controller="myCtrl">

    <div id="name" ng-repeat-start="x in friends">
    {{x.name}}
    </div>
    <div id="name" ng-repeat-end>

    {{x.age}}
   </div>

     <script>
     var app = angular.module("myApp", []);
      app.controller("myCtrl",     function($scope) {
  $scope.friends = [
   {name:'John', age:25, gender:'boy'},
    {name:'Jessie', age:30, gender:'girl'},
    {name:'Johanna', age:28, gender:'boy'}
   ];
   });
  </script>

  </body>
  </html>

edited Apr 8, 2017 at 4:41

answered Apr 8, 2017 at 4:34

Thomas Negash

4715 silver badges6 bronze badges

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

4 Comments

sam Over a year ago

Let me try this. Thanks

Sajeetharan Over a year ago

yeah this should be the answer, i really could not think of it :)

sam Over a year ago

Hey once i reach office, i will try and let you know. If it works, i will mark this as correct answer :) Thanks a lot

Sᴀᴍ Onᴇᴌᴀ Over a year ago

@sam for a detailed explanation, including a reference to the documentation and a working example snippet, please see my answer

Sajeetharan · Accepted Answer · 2017-04-08 04:11:15Z

0

You don't need nested ng-repeat, just use the first one and just do this

<div id="name" ng-repeat="x in friends">
{{x.name}}  {{x.age}}
</div>

DEMO

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div id="name" ng-repeat="x in friends">
{{x.name}} {{x.age}}
</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.friends = [
    {name:'John', age:25, gender:'boy'},
    {name:'Jessie', age:30, gender:'girl'},
    {name:'Johanna', age:28, gender:'boy'}
  ];
});
</script>

</body>
</html>

answered Apr 8, 2017 at 4:11

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

6 Comments

sam Over a year ago

Sorry. we should not change the html. we should have 2 divs.

sam Over a year ago

I have just given a sample. Real scenaio is entirely different. we have 2 divs. One div will show a product name and price and another div will show a product description with other specifications. For sample purpose, i have just given a dummy html.

Sajeetharan Over a year ago

post your sample product json, in this case you dont need two divs. in the second scenario you can have two divs.

sam Over a year ago

Json is just similar to the above one. That's how we got the html from a client.They will not change the html. Need to achieve using angularjs

Sajeetharan Over a year ago

if you really need a div there just embed it with another div <div>{{x.name}} </div> <div> {{x.age}} </div>

|

Sᴀᴍ Onᴇᴌᴀ · Accepted Answer · 2017-04-11 15:41:10Z

0

Use ng-repeat-start (a special syntax of the ngRepeat directive) to start the repeat and ng-repeat-end to finish it.

Special repeat start and end points

_{To repeat a series of elements instead of just one parent element, ngRepeat (as well as other ng directives) supports extending the range of the repeater by defining explicit start and end points by using ng-repeat-start and ng-repeat-end respectively. The ng-repeat-start directive works the same as ng-repeat, but will repeat all the HTML code (including the tag it's defined on) up to and including the ending HTML tag where ng-repeat-end is placed.}¹

Employing those directives with your code would look like this:

<div ng-repeat-start="x in friends" id="name{{x.name}}">
{{x.name}}
</div>
<div ng-repeat-end>
{{x.age}}
</div>

Note that the id attribute was changed to contain {{x.name}}. That is because "The id global attribute defines a unique identifier (ID) which must be unique in the whole document" ².

See this demonstrated below.

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.friends = [{
      name: 'John',
      age: 25,
      gender: 'boy'
    },
    {
      name: 'Jessie',
      age: 30,
      gender: 'girl'
    },
    {
      name: 'Johanna',
      age: 28,
      gender: 'boy'
    }
  ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat-start="x in friends" id="name{{x.name}}">
    {{x.name}}
  </div>
  <div ng-repeat-end>
    {{x.age}}
  </div>
</body>

¹_{https://docs.angularjs.org/api/ng/directive/ngRepeat}

²_{https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id}

edited Apr 11, 2017 at 15:41

answered Apr 8, 2017 at 4:24

Sᴀᴍ Onᴇᴌᴀ

8,3028 gold badges38 silver badges61 bronze badges

2 Comments

georgeawg Over a year ago

There is no such core directive as ng-id.

Sᴀᴍ Onᴇᴌᴀ Over a year ago

I knew that but didn't see any errors when trying to use it. Initially I used it because it appeared not to work with just id but now I see it does work. I have removed the prefix.

Collectives™ on Stack Overflow

Change loop execution in angular js

3 Answers 3

4 Comments

6 Comments

Special repeat start and end points

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

6 Comments

Special repeat start and end points

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related