CODEWITHSUNDEEP
htmlangularjs
denizburak
denizburak

Reputation: 59

How to create dynamic row with angular Js with 2 columns

enter image description hereI have list that I need to traverse in using angular js. I want to create row dynamically with two column and each column should show different element(record) info from list.

Upvotes: 0

Views: 359

Answers (4)

Surjeet Bhadauriya
Surjeet Bhadauriya

Reputation: 7156

It's quite simple...

I created an example.

Plunker link: Click here

Note: I created a dummy example for you. You have to maintain some code according to your array.

Upvotes: 0

Mumin Korcan
Mumin Korcan

Reputation: 101

Instead of using ng-repeat in tr element , you should use it in td element if you want column based dynamics

Upvotes: 0

Jesus Carrasco
Jesus Carrasco

Reputation: 1354

in controller have your list-array

vm.myList = [{key:'value', key2: 'value2'}, {key:'value', key2: 'value2'}];

in html use the directive ng-repeat to iterate over the array

<table>
   <tbody>
     <th>Key</th>
     <th>Key2</th>
   </tbdoy>
   <tr ng-repeat="item in vm.myList">
       <td>{{item.key}}</td>
       <td>{{item.key2}}</td>
   </tr>
</table>

if wann to add more rows in controller push it to the array

vm.myList.push({key:'newValue', key2:'otherValue'});

Upvotes: 0

Hadi
Hadi

Reputation: 17299

You can use ng-repeat directive to traverse list item. Which means whenever you want to push element in DOM, do push it inside collection listItems, ng-repeat will take care of rest.

<table>
   <tr ng-repeat="item in listItems">
     <td>{{item.property1}}</td>
     <td>{{item.property2}}</td>
   </tr>
</table>

Upvotes: 1

Related Questions