語義UI選項卡和AngularJS ng-repeat

我正在嘗試使用帶有角度的語義UI選項卡，但是我目前正面臨一個我無法修復的問題。讓我說，我對語義和角度都很陌生。
這裏的語義標籤的結構，我開始用：語義UI選項卡和AngularJS ng-repeat

<div class="ui container"> 
    <div class="ui centered secondary menu"> 
    <a class="red item active" data-tab="first">First</a> 
    <a class="red item" data-tab="second">Second</a> 
    </div> 
    <div class="ui active tab segment" data-tab="first">First</div> 
    <div class="ui tab segment" data-tab="secondo">Second</div> 
</div>

該標籤的行爲是由語義的JavaScript觸發：

<script> 
    $('.menu .item').tab(); 
</script>

到目前爲止好，一切正常，就像它應該。現在我的問題發生了：頁面的角度控制器提供了一個對象（可能）在內部保存多個不同的對象;爲簡單起見讓我們假設這些對象是2.父對象（實際上由所述控制器所服務的一個）具有這樣的結構：

{ 
    "1" : { 
     "category": "car", 
     "type" : [ 
      {name: "car1"}, 
      {name: "car2"} 
     ] 
    }, 
    "2": { 
     "category": "bike", 
     "type" : [ 
      {name: "bike1"} 
     ] 
    } 
}

此時我的目標是利用上述標籤結構來顯示對象內容，類型爲內容，類別爲選項卡標題。經過多次嘗試，我得到了：

<div class="ui centered secondary menu"> 
    <a ng-repeat="object in carsObj" class="red item" data-tab="{{object.category}}" ng-class="{active: $index == 0}">{{object.category}}</a> 
</div> 

<div ng-repeat="object in carsObj" class="ui tab segment" data-tab="{{object.category}}" ng-class="{active: $index == 0}"> 
    <div class="ui relaxed divided list"> 
    <div class="item" ng-repeat="type in object.types"> 
     <div class="content"> 
     <a class="header">{{type.name}}</a> 
     </div> 
    </div> 
    </div> 
</div>

假設carsObj是控制器的對象。我使用ng-repeat與carsObj中的對象構建儘可能多的選項卡（所以我需要迭代兩次，一個用於項目菜單，另一個用於實際選項卡片段）。作爲data-tab我在兩個迭代中都使用了內部對象的category，最後但並非最不重要的是，我通過ng-class將active類添加到第一個元素（同樣是兩邊）。這是我的堆棧，無論如何，該選項卡不起作用。它實際上顯示自己正確，第一個標籤（活動的）是好的，而第二個沒有響應，我可以看到標籤項目，但點擊它讓我無處可去，就好像語義.tab()不在那裏。任何幫助將非常感激。

來源

2016-03-03 MisterP

我有同樣的問題，但它現在適用於我。

的事情是，你必須重新啓動你的標籤使用，

$('.menu .item') 
    .tab();

例如，您使用angularJS ngRepeat創建一個製表系列後，您需要添加一個觸發器使用上述代碼啓動選項卡。像，

$("#triggerButton").click(function(){ 
    $('.menu .item') 
     .tab(); 
})

在此之後，您的選項卡將起作用。

來源

2016-12-19 18:43:47 user7117436

語義UI選項卡和AngularJS ng-repeat

回答

相關問題