在angularjs中动态更改轮播的id名称

Question

我在AngularJS App中使用了旋转木马。我希望每次迭代都能改变转盘的ID，但它不起作用请告诉我做错了什么？

<div ng-repeat="data in details">
        <div class="carousel" id="{{data._id}}" style=" width: 290px;
      max-width: 100% ;
      height: 250px;">

           <div class="carousel-inner">
            <div class="item" ng-class="{active:!$index}" ng-repeat="photo in data.photos">
                {{$index}}
               <a target="_blank" ui-sref="PhotoUpload">
                <img src="{{ photo }}" style=" width: 290px;
      max-width: 100% ;
      height: 250px;">
    </a>
            </div>
        </div>

        <a class="left carousel-control" data-target="#{{data._id}}" ng-non-bindable data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" data-target="#{{data._id}}" ng-non-bindable  data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
          <span class="sr-only">Next</span>
        </a>
    </div>
</div>

第一个旋转木马图像幻灯片正在工作，但如果我点击上一个和下一个按钮第一个轮播图像更改后，第二个轮播图像不起作用。但第二张图片

请帮我。

Answer 1

我通常处理动态id值，如下所示：

[attr.id]="data._id"

并为data-target

[attr.data-target]="'#' + data._id"

Answer 2

必须有可能您的ID对所有元素都相同。请在ID中附加{{$ index}}。

请尝试以下代码段

id="{{data._id}}_{{$index}}"