1
  1. 我添加了动态选项卡
  2. 我单击未加载页面的“创建项目”按钮
  3. 单击“创建作业”按钮后，第二页已加载
  4. 在我单击“项目”选项卡后，页面打开

    如何打开具有活动和动态加载内容的选项卡。

HTML

        <div class="btn-group btn-group-sm" role="group" aria-label="...">
        <a ng-click="createItem()" class="btn btn-primary ">Create Project</a>   
      </div>
      <div class="btn-group btn-group-sm" role="group" aria-label="...">
        <a ng-click="createJob()" class="btn btn-primary ">Create Job</a>   
      </div> 
         <uib-tabset active="activeTab">
                <uib-tab index="$index + 1" ng-repeat="tab in tabs" select='getContent($index)' heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
               <div bind-unsafe-html="tab.content"></div>
            </uib-tab>
       </uib-tabset>

JS

      $scope.activeTab = 0;

      $scope.tabs = [
        { tabID : 1, title:'Page A', template: 'a.html',  content:'' , loaded : false, parentTabID:0, active : false },
        { tabID : 2, title:'Page B', template: 'b.html',  content:'', loaded : false, parentTabID:0, active : false },
        { tabID : 3, title:'Page C', template: 'c.html', content:'', loaded : false, parentTabID:0, active : true }
      ];

      angular.forEach( $scope.tabs, function(obj, value){
      if (obj.active){
        $scope.activeTab = value+1;    
        }
      });

      $scope.createItem = function () {
        var ta = false;
        angular.forEach( $scope.tabs, function (key) {
          if(key.tabID == 4){
        ta = true;
          }
        });

        if(ta){
          return false;
        }

        var menu = {
          title: "Project",
          template: "d.html",
          active: true,
          loaded: false,
          tabID: 4,
          content: "",
          parentTabID: 2
        };
        $scope.tabs.push(menu);
        setIndex(4);
      };

      $scope.createJob = function () {

        var ta = false;
        angular.forEach( $scope.tabs, function (key) {
          if(key.tabID == 5){
        ta = true;
          }
        });

        if(ta){
          return false;
        }    

        var menu = {
          title: "Job",
          template: "e.html",
          active: true,
          loaded: false,
          tabID: 5,
          content: "",
          parentTabID: 2
        };
        $scope.tabs.push(menu);
        setIndex(5);
      };  

    $scope.getContent = function (index) {
       var item = [];

        angular.forEach($scope.tabs, function (key, value) {
          if(value === index){
        item.push(key)
          }
        });

        /* or make request for data delayed to show Loading... */
        $timeout(function () {
          $http.get(item[0].template).then(function (res) {
        item[0].content = res.data;
        item[0].loaded = true;
          });
        }, 100);
      };

      function setIndex(tabID) {  

      // all active to false
        angular.forEach( $scope.tabs, function (key) {
          key.active = false;
        });

        // new tab going to active 
        angular.forEach( $scope.tabs, function(obj, value){
        if ( obj.tabID == tabID){
          obj.active = true;   
          $scope.activeTab = tabID; 
          }
        });
        }

这是我的示例代码

4

0 回答 0