Outer and inner forloop angular

I’m new to angular… What I want to do is basically a “loop in a loop” (one outer and one inner for-loop)

html:

<tbody>
<tr ng-repeat="service in services track by $index">
<td>
    <table>
        <tr ng-repeat="sd in service.data">
        <td>How do I write here to show (line1,row1) (color1,red1) etc ?</td>
        <td>If item2 ... (line2,row2) (color2,red2)</td>
        <td>If item3 ... (line3,row3) (color3,red3)</td>
        </tr>
    </table>  
</td>
</tr>
</tbody>

My controller (with the data that acts as the model):

 $scope.services = [
  { index: 0, 
    name: "Getwebcolors", 
    url:"getwebcolors", 
    type: "GET", 
    description: "Hexadecimal values from {url} separated by semicolons", 
    data:[["line1","solid1"],["color1","red1"]] },
  { 
    index: 1, 
    name: "desc 2", 
    url:"", 
    type:"GET", 
    description: "X2", 
    data:[["line2","solid2"],["color2","red2"]] },
  { 
    index: 2, 
    name: "desc 3", 
    url:"", 
    type:"POST", 
    description: "X3", 
    data:[["line3","solid3"],["color3","red3"]] }
 ];

UPDATE

To clarify.. (I hope :-))

<!-- This loops through through the outer array services
and the inner array data -->
<tr ng-repeat="service in services track by $index">
<td>
    <table>
        <tr ng-repeat="sd in service.data">
        <td>{{sd[0]}}</td><td>{{sd[1]}}</td>            
        </tr>
    </table>  
</td>

</tr>
</tbody>

Above will show for the first service

line 1, solid1 (first column = line1, second column = solid1)
color1, red1   (first column = color1, second column = red1)

and … (same structures with columns as described in first servie above)

line 2, solid2
color2, red2

$scope.services is an array of objects. Every object has a data-attribute that is an array of an array. [[ is an array and { is an object. That’s a standard and I hope? Angular uses that to but it seems that way 🙂

$scope.services.service[index].data contains an array and there could be unknown number of rows but each row contains a key/value pair (e.g. line1->solid1)


This is my first application in angular. The final purpose is to fetch information after clicked on a specific webservice

[button 1 = webservice 1] -> show info
[button 2 = webservice 2] -> show info
[button 3 = webservice 2] -> show info

I wanted to understand how to reference different items in the data array and to do that for-loops seemed like a good way to understand how it worked with ng-repeat. I think I did something like this from start {{sd[0][0]}} and {{sd[0][1]}} but that did not work at all (because it then takes first character of sd[0] and second character of sd[0] instead)

— Now when I understand this I could move on with the click (I know how to bind values from $scope to an element when clicked on a button but I hade an issue with data which is an array of an array).


Thanks for your help! (And please tell me if I’m wrong in something I’ve written. That’s way you learn!)

Answer

I think you might be trying for something like this:

<tbody>
<tr ng-repeat="service in services track by $index">
<td>
    {{service.name}}
</td>
<td>
    <table>
        <tr ng-repeat="sd in service.data">
        <td>{{sd[0]}}</td>
        <td>{{sd[1]}}</td>
        </tr>
    </table>  
</td>
</tr>
</tbody>

Leave a Reply

Your email address will not be published. Required fields are marked *