语义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

回答

相关问题