Добавить вкладку с активным и ng-repeat в uib-tab

Так что я пытался выяснить это некоторое время, и я вижу сообщение, похожее на это, но без ответа, поэтому я постараюсь опубликовать это, но с plunkr, чтобы показать в качестве примера.

Так что проблема в том, что при загрузке я замечаю, что на вкладке пользовательского интерфейса всегда установлена ​​кнопка Добавить вкладку. То, что я хочу сделать, это иметь первый элемент в ui-tab ng-repeat, чтобы быть активным, а не статическую кнопку Add Tab.

<uib-tabset active="activeTabIndex"> <uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}">Some content</uib-tab> <uib-tab heading="Add a tab" ng-click="addTab()" >Add a tab</uib-tab> </uib-tabset>

https://plnkr.co/edit/XrYSKLdyN1cegfcdjmkz?p=preview

Как мне этого добиться? Я был на нем немного, но до сих пор не знаю, как решить эту проблему.

Спасибо,

Источник

1 ответ

Решение

Думаю, вам может понравиться этот фиксированный плункер,

Немного сложно создать свой собственный directive вместо того, чтобы использовать дополнительные <uib-tab> достичь там.

Образец кода:

<!doctype html>
<html ng-app="ui.bootstrap.demo">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
  <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.4.js"></script>
  <script type="text/javascript">
    angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
    angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function($scope, $window, $timeout) {

      $scope.tabs = [{
        title: 'Tab1',
        content: 'content1'
      }, {
        title: 'Tab2',
        content: 'content2'
      }];
      $scope.activeTabIndex = 0;//$scope.tabs.length - 1;

      $scope.addTab = function() {
        var newTab = {
          title: 'Tab ' + ($scope.tabs.length + 1),
          content: 'content ' + ($scope.tabs.length + 1)
        };
        $scope.tabs.push(newTab);
        $timeout(function() {
          $scope.activeTabIndex = ($scope.tabs.length - 1);
        });
        console.log($scope.activeTabIndex);
      };
    });
    angular.module('ui.bootstrap.demo').directive('uibTabButton', function() {
      return {
        restrict: 'EA',
        scope: {
          handler: '&',
          text:'@'
        },
        template: '<li class="uib-tab nav-item">' +
          '<a href="javascript:;" ng-click="handler()" class="nav-link" ng-bind="text"></a>' +
          '</li>',
        replace: true
      }
    });
  </script>
  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div ng-controller="TabsDemoCtrl">

    Active index: {{ activeTabIndex }}
    <br /> Tab count: {{ tabs.length }}
    <br />

    <input type="button" value="Add Tab" ng-click="addTab()" />

    <uib-tabset active="activeTabIndex">
      <uib-tab active="activeTabIndex==$index" ng-repeat="tab in tabs" heading="{{tab.title}}">{{tab.content}}</uib-tab>
      <uib-tab-button handler="addTab()" text="Add a tab"></uib-tab-button>
    </uib-tabset>
  </div>
</body>

</html>

Источник
Другие вопросы по тегам