I 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.
4 Answers
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>
2 Comments
Pankaj Parkar
my pleasure, but why :( ?
denizburak
I am getting records from db which will have name,caseid,closed date,other info for each user.I am using ionic framework
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'});
Comments
Instead of using ng-repeat in tr element , you should use it in td element if you want column based dynamics
Comments
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.
answered Jul 29, 2017 at 17:27
Surjeet Bhadauriya
7,2223 gold badges39 silver badges54 bronze badges
14 Comments
denizburak
what if I want to display firstname and lastname in one column and other frstname and lastname in another column
Surjeet Bhadauriya
Then place ng-repeat on <td></td> tag.
denizburak
scenario is my row should be add dynamically and there will be always two column. there will only two records in one row
Surjeet Bhadauriya
please post your array or object (data) so that we can give you best solution.
denizburak
Array=[{Name:Ajay,CaseId:1555,Date:07/13/2017},{Name:Atul,CaseId:16789,Date:09/08/2017},{Name:Ram,CaseId:16722,Date:05/04/2016}, {Name:Atul,CaseId:16789,Date:09/08/2016} ]
|
listyou are referring to