CODEWITHSUNDEEP
javascriptangularjs
AshBringer
AshBringer

Reputation: 2673

Angularjs - Several ng-repeat in the same table for different columns

I have 3 arrays that I want to fill a table with. I want these values in different columns meaning :

Column1(People)|     Column2(Animals)|     Column3(Letters)|

        -----  |              -----  |              -----  |
        -----  |              -----  |              -----  |
        -----  |              -----  |              -----  |
        -----  |              -----  |              -----  |

Well I could make 3 tables and put them side by side but I wanted to know if I can make it like this.

As you can see, the result of the fiddle is ugly.

http://jsfiddle.net/9fR23/243/

Upvotes: 0

Views: 690

Answers (1)

Marwen Trabelsi
Marwen Trabelsi

Reputation: 4257

If you're really have no choice to handle your data in different arrays you can use $index to achieve that. (never tested when the arrays having different length) :

<tr ng-repeat="person in people">
        <td>{{ people[$index].first + ' ' + people[$index].last }}</td>
        <td>{{ animals[$index].first + ' ' + animals[$index].last }}</td>
        <td>{{ letters[$index].first + ' ' + letters[$index].last }}</td>
    </tr>

jsfiddle.net/9fR23/246

Or you can get the bigger array length like the follow:

<tr ng-repeat="i in getMaxLength()">...

And somewhere in your controller:

$scope.getMaxLength = function() {
//....
return max;
}

Elsewhere you can handle them in the same Array as @Daniel suggested. It depends how your data is..

Upvotes: 1

Related Questions