如何在angularjs中为动态行设置id答案

【问题标题】：How to set id's for dynamic rows in angularjs如何在angularjs中为动态行设置id
【发布时间】：2025-11-22 01:45:01
【问题描述】：

我已经使用 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>

【问题讨论】：

到目前为止，你有任何 jsfiddle 演示吗？
您能否尝试简化您的问题并清楚地解释您正在尝试做什么以及您预期的 html 输出是什么？也请发布您的json。

标签： angularjs

【解决方案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

【讨论】：

【解决方案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

【讨论】：