I'm trying to bind this data to Html using angular js

Question

I tried using ng-repeat value,group1,group2

i'm getting

grp1

grp2

abc

def

value1

value2

I need

grp1

  abc

     valu1

grp2

      def

          valu1  

Html:
<ul>
<li ng-repeat="heading in group1"> {{heading}} </li> // heading
<li ng-repeat="subheading in group2"> {{subheading }} </li> // sub heading
<li ng-repeat="val in value"> {{val}} </li> // value
</ul>



JavaScript:

                             $scope.group1 = [grp1,grp2];
                             $scope.group2 = [abc,def];
                             $scope.value = [value1,value2];

sounds like you need to remap your data so each top level of your array has nested arrays contained within. Then you can structure html to have ng-repeat within ng-repeat to loop over child arrays. Data shown is far too primitive to provide any mapping assistance. WHat you have displayed now shows no relationships between the 3 arrays in your scope — charlietfl
– charlietfl, Commented Nov 13, 2013 at 13:03

Davin Tryon · Accepted Answer · 2013-11-13 11:31:21Z

1

The template would not use $scope directly. It would be something like this:

<ul>
    <li> {{ keys[0] }}</li> // heading
    <li> {{ keys[1] }}</li> // sub heading
    <li> {{ result }}</li>  // values
</ul>

Scope is implied in the template and {{ }} are used for interpolation.

answered Nov 13, 2013 at 11:31

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

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

5 Comments

Ranjith Kumar Over a year ago

OMG. actually keys[0], keys[1], result are in for loop so i'm geting only one value, so please review the code

Ranjith Kumar Over a year ago

Please review the modified code i'm getting only one value In the Box // heading Sales Package // sub heading ssssssssssssss // values it is not repeating

Davin Tryon Over a year ago

what array do you want to repeat? I'm very unclear on what you are trying to render. Can you provide an example?

Ranjith Kumar Over a year ago

now please check the code i modified i need to repeat group1 , group2, value simultaniously

Galdo Over a year ago

Your 3 ng-repeat are independant so the content of the first ng-repeat will be printed completely before the content of the second ng-repeat. You will need to include them in each other for this to work. Something like <li ng-repeat="x in group1"><span ng-repeat="y in group2"></span></li>

Collectives™ on Stack Overflow

I'm trying to bind this data to Html using angular js

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related