Question

我是AngularJS的新手。我的应用程序中有一个2级手风琴。

 <div class="box-group" id="accordion" ng-repeat="item in tourList">
    <div class="panel box box-primary">
    <div class="box-header with-border">
    <h4 class="box-title">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" class="collapsed">
    {{item.Name}}
    </a>
    </h4>
                        </div>
                        <div id="collapseOne" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
                            <div class="box-body">
                                <div class="box-group" id="accordion1" ng-repeat="itinerary in item.Itineraries">
                                    <!-- we are adding the .panel class so bootstrap.js collapse plugin detects it -->
                                    <div class="panel box box-primary">
                                        <div class="box-header with-border">
                                            <h4 class="box-title">
                                                <a data-toggle="collapse" data-parent="#accordion1" href="#collapseItin" aria-expanded="false" class="collapsed">
                                                    {{itinerary.Name}}
                                                </a>
                                            </h4>
                                        </div>

我想为手风琴div创建动态id，并将其分配给父手风琴。

任何帮助！

Answer 1

您可以通过使用ngRepeat指令公开的隐式$ index属性来创建动态ID。为了处理嵌套的ngRepeat，您还可以通过ngInit指令为$ index属性设置别名。这清楚地说明了哪个$ index属性被引用。

鉴于......

angular.module('app', [])

.controller('ctrl',
  function($scope) {

    $scope.tourList = [{
      Name: "Tour 1",
      Itineraries: [{
        Name: "tour 1 itin 1",
        Stops: ["A","B"]
      }, {
        Name: "tour 1 itin 2",
        Stops: ["C","D"]
      }]
    }, {
      Name: "Tour 2",
      Itineraries: [{
        Name: "tour 2 itin 1",
        Stops: ["E","F"]
      }, {
        Name: "tour 2 itin 2",
        Stops: ["G","H"]
      }]
    }]
  }
);

......以下嵌套手风琴正常工作......

<div class="box-group" id="tourAccordion_{{tourIndex}}" ng-repeat="item in tourList" ng-init="tourIndex=$index">
<div class="panel box box-primary">
  <div class="box-header with-border">
    <h4 class="box-title">
      <a data-toggle="collapse" data-parent="#tourAccordion_{{tourIndex}}" href="#collapse_{{tourIndex}}" aria-expanded="false" class="collapsed">{{item.Name}}</a>
    </h4>
  </div>
  <div id="collapse_{{tourIndex}}" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
    <div class="box-body">
      <div class="box-group" id="itineraryAccordion_{{tourIndex}}_{{itineraryIndex}}" ng-repeat="itinerary in item.Itineraries" ng-init="itineraryIndex=$index">
        <!-- we are adding the .panel class so bootstrap.js collapse plugin detects it -->
        <div class="panel box box-primary">
          <div class="box-header with-border">
            <h4 class="box-title">
              <a data-toggle="collapse" data-parent="#itineraryAccordion_{{tourIndex}}_{{itineraryIndex}}" href="#collapseItin_{{tourIndex}}_{{itineraryIndex}}" aria-expanded="false" class="collapsed">{{itinerary.Name}}</a>
            </h4>
          </div>
          <ul id="collapseItin_{{tourIndex}}_{{itineraryIndex}}" class="panel-collapse collapse">
            <li ng-repeat="stop in itinerary.Stops">{{stop}}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

https://plnkr.co/edit/XQUq63

...对于两个ngRepeats我使用可用的$ index值（为了清晰/可读性而别名）以确保ID是唯一的。

注意：通常的惯例是，属性名称应以小写字母开头。我保留了你的命名惯例，只是为了在问答之间保持一致。

Angular JS中多级手风琴的动态div id

1 个答案: