Question

我尝试使用带有角度的Semantic-UI标签，但我目前面临的问题是我无法修复。让我说一下，我对语义和角度都是新手这是我开始使用的语义标签结构：

<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，最后但并非最不重要的是，我将active类赋予第一个元素（再次双方）通过ng-class。这是我的堆叠，无论如何，标签都不起作用。它实际上显示正确，第一个标签（活动标签）是正常的，而第二个标签没有响应，我可以看到标签项，但点击它让我无处可去，好像语义.tab()不是＆＃39那里。任何帮助将非常感激。

Answer 1

我有同样的问题，但现在对我有用。

问题是你必须使用

再次启动标签

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

例如，在使用angularJS ngRepeat创建选项卡系列之后，需要添加触发器以使用上面的代码启动选项卡。喜欢，

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

在此之后，您的标签将会起作用。

语义UI选项卡和AngularJS ng-repeat

1 个答案: