Angular-UI中的动态选项卡失败？

Question

创建了这个简单的测试用例，它显示了发生的错误：

的HTML

<tabset ng-repeat="tab in tabs">
    <tab heading="{{tab.title}}">
        <i ng-class="name_to_class[tab.title]"></i>{{tab.title}}
    </tab>
    <tab active="tab.active" disabled="tab.disabled">
        <ul class="list-group">
            <li class="list-group-item" ng-repeat="c in tab.content">{{ c }}</li>
        </ul>
    </tab>
</tabset>

的JavaScript

var TabsDemoCtrl = function ($scope) {
  $scope.name_to_class = {'Dynamic Title 1': 'pull-right', // icons in real-code
                          'Dynamic Title 2': 'pull-right'};
  $scope.tabs = [
    { title:'Dynamic Title 1', content:['foo', 'bar'] },
    { title:'Dynamic Title 2', content:['can', 'haz'] }
  ];
};

nk

Answer 1

您不应该在tabset上放置ng-repeat （ docs ）

将ng-repeat放在tab

nk

<tabset>
   <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled"  ng-class="name_to_class[tab.title]">
    <ul class="list-group">
      <li class="list-group-item" ng-repeat="c in tab.content">{{ c }}</li>
    </ul>
  </tab>
</tabset>

Answer 2

尝试这个。 您需要重复选项卡而不是选项卡集吗？

        <tabset >
            <tab ng-repeat ="tab in tabs" heading='{{tab.title}}'> 
                <ul class = "list-group" >
                  <li class = "list-group-item" ng-repeat='c in tab.content'> {{c}}
                </ul>
            </tab>
        </tabset>