2016-01-23 43 views
0

我正在使用angular的ng-repeat來創建具有相同html格式的對象數組。然後通過使用表達式或ng-bind-html將對象填充爲值。不同的對象包含根據id在上下文主體內選中不同頁面的列表頁面。問題是標籤按鈕應該帶我到特定對象內不同的頁面,但是因爲ng-repeat根據表達式/指令創建了具有不同值的精確形式的重複項,整個頁面被視爲一個對象,而對於一個選項卡,ID的響應來自具有相同屬性的陣列中的不同對象。我正在尋找一種方法來添加一個整數到每個對象從數組創建後的每個ID的結尾,以便每個項目將被不同的對待,而不是他們所有行爲相同,因爲具有相同的確切ID代碼是下面。Angular/ID + integer

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

「track.id」有什麼問題? 'href =「#moreInfo {{track.id}}」' – Artem

回答

0

中的每個ng-repeat子範圍有創建一組範圍內的變量的哪一個是$index

你應該能夠做一些事情,如:

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

ng-repeat文檔的列表在每個子範圍內可用的所有變量

+0

在href屬性中使用類似'{{hash}}'的角度標記會導致鏈接轉到錯誤的URL,如果用戶在Angular擁有有機會用其值替換「{{hash}}」標記。 – Malkus