angular 动态加载 ui-bootstrap 标签内容

Question

我正在使用 angular ui-bootstrap 选项卡来开发选项卡。但是我如何在每次点击标签后动态加载标签数据。

我可以加载静态内容。但我想从 ajax 动态加载数据。 每个选项卡包含不同的 HTML 个文件。

控制器

  $scope.customerInfoTabs = 
           {  
              "General":[  
                 "General",
                 "Employment",
                 "Relationship Status",
              ],
              "Identification":[]                
           }
$scope.customerInfo = $scope.customerInfoTabs['General'];

模板

<div class="well">            
            <div class="tabbable">
              <ul class="nav nav-tabs">                               
                <li ng-class="{'active': $index == 0}" ng-repeat="infotabs in customerInfo"><a showtab="" href= data-toggle="tab" ng-click="">{{infotabs}}</a></li>              
              </ul>
              <div class="tab-content">                
                <div class="tab-pane active" id="tab1">
                  <p>I'm in Section 1.</p>
                </div>
                <div class="tab-pane" id="tab2">
                  <p>Howdy, I'm in Section 2.</p>
                </div>
                <div class="tab-pane" id="tab3">
                  <p>Howdy, I'm in Section 3.</p>
                </div>
              </div>
            </div>
        </div>

Answer 1

我认为这个问题已由这个 Whosebug 回答： first link or second link

所以您可以使用标签集来完成您需要的工作。

Answer 2

如果您想为每个选项卡显示动态内容，您需要使用 $http service to fetch the html, then bind it using ngBindHtml。

方法如下：

<tabset>
   <tab ng-repeat="tab in tabs" heading="{{tab.title}}"  select="loadData()">
      <div ng-bind-html="tabDynamicContent"></div>
   </tab>
</tabset>

以上示例是一种简化，其中所有选项卡都具有相同的 html。还要确保包含 ngSanitize 模块。

这里是 plunkr：http://plnkr.co/edit/Yege43KerzfFKE8k5OGc?p=preview

angular 动态加载 ui-bootstrap 标签内容

angular load ui-bootstrap tabbed content dynamically

twitter-bootstrap

angularjs

angular-ui-bootstrap

控制器

模板