Как привязать активную вкладку к последнему элементу массива из области видимости - PullRequest
Новая
       38

Как привязать активную вкладку к последнему элементу массива из области видимости

0 голосов
/ 20 мая 2019

Я пытаюсь активировать uib-tabset для моего последнего элемента массива. Однако, когда я делаю это, uib-tabset сходит с ума, он удаляет свои собственные вкладки. Я не хочу владеть полем области действия для активного uib-tabset, я хочу использовать длину массива, чтобы определить, какая вкладка должна быть активной. Возможно ли это? 

<uib-tabset active="tabs.length">
    <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" 
      disable="tab.disabled">
      {{tab.content}}
    </uib-tab>
</uib-tabset>

приводит к неожиданным результатам, таким как удаление собственных вкладок. Полный пример: https://plnkr.co/edit/JJ0k8LtRPXqXKrjEM0bn?p=preview Попробуйте нажать на первую вкладку.

Ответы [ 3 ]

1 голос
/ 20 мая 2019

Не знаю почему, но мне показалось, что сохранение длины вкладок в контроллере сработало.Надеюсь, поможет.Проверьте PLNKR.

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

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope, $window) {
  $scope.tabs = [
    { title:'Dynamic Title 1', content:'Dynamic content 1' },
    { title:'Dynamic Title 2', content:'Dynamic content 2' },
    { title:'Dynamic Title 3', content:'Dynamic content 3' },
  ];
  $scope.tabslenght = $scope.tabs.length;
  $scope.model = {
    name: 'Tabs'
  };
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.3.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<style type="text/css">
  form.tab-form-demo .tab-pane {
    margin: 20px 20px;
  }
</style>

<div ng-controller="TabsDemoCtrl">


  <uib-tabset active="tabslenght">
    <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" 
      disable="tab.disabled">
      {{tab.content}}
    </uib-tab>
  </uib-tabset>
</div>
  </body>
</html>
0 голосов
/ 20 мая 2019

Поскольку нам нужно активировать последнюю вкладку изначально, мы можем использовать для нее ng-init .Пожалуйста, пройдите по коду, надеюсь, он вам подойдет. 

<uib-tabset ng-init="active=tabs.length" active="active">
    <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" 
      disable="tab.disabled">
      {{tab.content}}
    </uib-tab>
  </uib-tabset>
0 голосов
/ 20 мая 2019

Если вам не нужна другая переменная области видимости для длины вкладок, этот трюк должен работать для вас: 

<uib-tabset  ng-init="len = tabs.length" active="len">
...