遇到問題重複使用嵌套NG-重複和正確的項目NG-如果

Question

我有以下的html：

  <div ng-repeat="tab in tabs" ng-if="tabIsActive(tab, $index)"> 

        <ul ng-repeat="section in tab.sections"> 

        <h2 ng-class="productTitle" ng-repeat="child in section.children" ng-if="sideTabIsActive(section, $index)"> 
         <img ng-src="{{ child.productImageURL }}"/> 
         <li>{{ child.title }}</li> 
        </ul> 
      </div> 

這是 「標籤」 JavaScript對象是什麼樣子：

我想要的輸出是選擇該部分時爲每個部分列出的子類別標題（例如children0.title）和圖像（例如children0.productImageURL）。

實施例所需的輸出：

當分析天平被點擊

(ML image) //which is section0.child0.productImageURL 
ML   //which is section0.child0.title 

(XS image) //which is section0.children1.productImageURL 
XS   //which is section0.child1ren.title 

目前，我顯示該：

當分析天平點：

(ML image) //which is section0.children0.productImageURL 
ML   //which is section0.children0.title 

(XPE image) //which is section1.children0.productImageURL 
XPE   //which is section1.children0.title 

我怎樣才能列出每個部分的兩個孩子（和相關圖像）在哪一部分被選中（selectedSideIndex）？

除了上述HTML，這裏是相關的HTML和JavaScript，我在我試圖達到所需的輸出使用：

$scope.toggleSideSelect = function(ind){ 
      $scope.selectedSideIndex = ind; 

    } 


$scope.sideTabIsActive = function (tab, $index) { 
      var selectedIndexTest = $scope.selectedSideIndex 
      return $index==$scope.selectedSideIndex; 

}

  <div ng-repeat="tab in tabs" ng-if="tabIsActive(tab, $index)"> 

        <ul ng-repeat="section in tab.sections" ng-click="toggleSideSelect($index)"> 
        <li>{{ section.title }}</li> 
        <ul ng-repeat="child in section.children"> 
         <li>{{ child.title }}</li> 
        </ul> 
        </ul> 
      </div> 

Answer 1

你幾乎有:)

你需要做的是這樣的：

<div ng-repeat="tab in tabs" ng-if="tabIsActive(tab, $index)"> 

     <ul ng-repeat="section in tab.sections" ng-init="sectionIndex = $index"> 

      <h2 ng-class="productTitle" ng-repeat="child in section.children" ng-if="sideTabIsActive(section, sectionIndex)"> 
       <img ng-src="{{ child.productImageURL }}"/> 
       <li>{{ child.title }}</li> 
     </ul> 
</div> 

這樣，使用ng-init="sectionIndex = $index"您可以保存該節的$index，並且可以在嵌套的ng-repeat上使用它。它也可以使用$parent.$index，但我不會推薦它，因爲結構可能會改變，你將留下一個錯誤。

這樣，您可以使用該部分的索引調用ng-if="sideTabIsActive(section, sectionIndex)"，只有活動部分的孩子才能看到。

編輯：你應該的

$scope.sideTabIsActive = function (tab, $index)

簽名既然你不實際使用的功能tab改變

$scope.sideTabIsActive = function ($index)

。 （如果你這樣做，不要忘記從視圖中改變對該函數的調用）