How to set id's for dynamic rows in angularjs

Question

I have created a dynamic table using ngtable , and table data for 3 columns is fetched from json.In that table for 4th column a green/red color circle should come based on connection if successful or not. The same i have done with javascript(without using json) in which for that 4th column i have set the four different id's,and based on id's i have changed the color using ajax if connection is successful. In angular using json i m unable to do so , I have created the dynamic table but how to set id's and from where to get the image i'm unable to do.Can anyone help on this.

<table ng-table>
<thead>
<tr>
<th>Feature</th>
<th>DaysUp</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>{{user.status}}</td>
</tr>
</tbody>    
</table>

Can you please try to simplify your question and clearly explain what you are trying to do and what your expected html output is? Also please post your json. — Wayne Ellery
– Wayne Ellery, Commented Jan 6, 2015 at 8:05

Akhlesh · Accepted Answer · 2015-01-06 08:50:07Z

1

You can use scope id and index value to generate unique id. As ng-repeat creates child scope so you will get one scope id(unique id of scope) that id you can attach with $index.

        <tr ng-repeat="user in users" id="{{$parent.$id+'-'+$index}}">
            <td>{{user.name}}</td>
            <td>{{user.status}}</td>
        </tr>

JSFiddle Demo

answered Jan 6, 2015 at 8:50

Akhlesh

2,3991 gold badge16 silver badges23 bronze badges

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

Comments

mia · Accepted Answer · 2015-01-06 08:57:13Z

HTML:

<div ng-app="myapp" ng-controller="myctrl">

    <table>
        <thead>
        <tr>
            <td>Name</td>
            <td>DaysUp</td>
            <td>Status</td>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="user in users">
            <td>{{user.name}}</td>
            <td>{{user.daysup}}</td>
            <td><img width="20px" height="20px" ng-src="{{imageurls[user.status-1]}}" /> </td>
        </tr>
        </tbody>
    </table>
</div>

SCript:

angular.module('myapp',[])
            .controller('myctrl',function($scope){
                $scope.users =[
                    {'name':'xyz','daysup':2,'status':1},
                    {'name':'abc','daysup':4,'status':2},
                    {'name':'klm','daysup':6,'status':3},
                    {'name':'yrt','daysup':9,'status':4}
                ];
                $scope.imageurls = [
                        'http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_yellow_circle.png',
                        'http://pix.iemoji.com/sbemojix2/0702.png',
                        'http://clker.com/cliparts/u/g/F/R/X/9/green-circle-md.png',
                        'http://pix.iemoji.com/sbemojix2/0701.png'
                ];

            });

Plunker Demo

Collectives™ on Stack Overflow

How to set id's for dynamic rows in angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related