角度/ ID + 整数

Question

我正在使用angular的ng-repeat来创建具有相同html格式的对象数组。然后，使用表达式或 ng-bind-html 填充值。 不同的对象包含列表页，这些列表页根据 id 跳到上下文正文中的不同页面。问题是选项卡按钮应该将我带到特定对象中的不同页面，但由于 ng-repeat 根据表达式/指令创建具有不同值的确切形式的重复项，整个页面被视为一个对象，一个选项卡的 id 响应具有相同属性的数组中的不同对象。我正在寻找一种方法，在从数组创建每个对象后在每个 id 的末尾添加一个整数，以便每个项目都将得到不同的处理，而不是它们的行为都相同，因为它们具有相同的确切 id 代码如下。

<div class="col-md-6" data-ng-repeat="track in dashboard.items track by track.id">
            <div class="panel-body">
                <div class="panel-primary">
                    <h3 class="panel-title"><i class="icon-rocket fa-fw"></i> <span class="hidden-xs"><strong>@*Track name goes in here*@{{track.name}}</strong></span></h3>
                </div>
            </div>
            <div id="demo3-panel" class="panel panel-blue" data-context="">
                <div class="panel-in">
                    <div class="panel-blue pull-right">
                        <ul class="nav nav-tabs nav-contrast-dark" id="demo3-tabs">
                            <li class="active"><a href="#description1" data-toggle="tab">Description</a></li>
                            <li class=""><a href="//this is the id that I want to change by adding an integer to the end of the id name after each ng-repeat// moreInfo" data-toggle="tab">More Info</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Requirements<i class="fa fa-angle-down"></i></a>
                                <ul class="dropdown-menu dropdown-menu-right">
                                    <li ng-repeat="course in track.courses"><a href="#{{course.name}}" data-toggle="tab">{{course.name}}</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="description1 {{course.name}}">
                            <br><br>
                            <p class="text-blue" style="text-align:center"><strong>Description:</strong></p>
                            <p ng-bind-html="track.description"></p>
                        </div>
                        <div class="tab-pane fade" id="moreInfo1"><br><br>
                           <p class="text-blue" style="text-align:center"><strong>More Information about {{track.name}}:</strong></p>
                            <p ng-bind-html="track.moreInformation"></p>
                        </div>
                        <div class="tab-pane fade" ng-repeat="course in track.courses" id="{{course.name}}"><br><br>
                            <p class="text-info" style="text-align:center"><strong>{{course.name}}:</strong></p>
                            <p>{{course.description}}</p>
                            <a href="#">Register For {{course.name}} Section</a>
                        </div>
                    </div><!-- /tab-content -->
                </div><!-- /panel-body -->
                <a href="track/{{track.id}}/edit" class="cmdEditButton btn btn-info">Edit</a>
            </div><!-- /.panel -->
        </div><!-- /.cols -->
    </div><!-- /.panel -->

Answer 1

每个ng-repeat子作用域都会创建一组作用域变量，其中一个是$index

您应该能够执行以下操作：

<a href="#tab-content-{{$index}}">

有关每个子作用域中可用的所有变量的列表，请参阅ng-repeat文档