Question

我已经使用ngtable创建了一个动态表，并且从json获取了3列的表数据。在第4列的表中，如果成功与否，绿色/红色圆圈应该基于连接。我用javascript（不使用json）完成了相同的操作，其中第4列我设置了四个不同的id，并且基于id，如果连接成功，我已经使用ajax更改了颜色。在角度使用json我无法这样做，我已经创建了动态表，但是如何设置id以及从哪里获取图像我无法做到。任何人都可以帮助解决这个问题。

<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>

Answer 1

您可以使用范围ID和索引值来生成唯一ID。由于ng-repeat创建子范围，因此您将获得一个范围ID（范围的唯一ID），您可以使用$ index附加该ID。

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

JSFiddle Demo

Answer 2

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>

脚本：

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

如何为angularjs中的动态行设置id

2 个答案: