Как получить активную вкладку AngularStrap?

Я несколько новичок в использовании угловых и угловых указателей. Мне нужно использовать директиву вкладки со статической разметкой, как, например:Как получить активную вкладку AngularStrap?

<div data-fade="1" bs-tabs> 
    <div data-title="'Home'"><p>Static tab content A</p></div> 
    <div data-title="'Profile'"><p>Static tab content B</p></div> 
</div>

В другой части страницы, которую я хотел бы, чтобы отобразить DIV только при выборе вкладки первой. Div не является частью вкладок, но находится в одном и том же общем контроллере. Как я могу показать/скрыть этот div на основе выбранной вкладки?

Что-то вроде этого?

<div ng-show="???? active tab stuff here ????">Home tab is selected</div>

Благодарим за любую помощь.

источник

2013-03-22 Carbonski

Как показано в example на странице AngularStrap активный кран хранится в

tabs.activeTab

Таким образом, вы можете использовать это свойство для условно показать дисплей еще что-то вроде так

<div ng-show="tabs.activeTab == 0">The first tab is active</div>

UPDATE

Даже с вкладками без объекта вы можете просто привязать модель к вкладкам bs-tabs для хранения активный идентификатор, такой как:

<div data-fade="1" ng-model="tabs.activeTab" bs-tabs>

Просьба обновить plnkr. (Нажмите на 3-ю вкладку и увидите текст «Test»)

источник

2013-03-22 21:26:46

Насколько я понимаю, это работает только с объектно-ориентированными вкладками, где в модели определен массив табуляции. Я использую пример, основанный на разметке. Я должен использовать это, потому что некоторые вкладки отображаются только тогда, когда пользователь аутентифицирован, и это часть кода просмотра Razor ASP.Net. Мне интересно, можно ли даже активировать активную Tab вне директивы с вкладками, управляемыми разметкой. – Carbonski

Awesome, спасибо за обновление. Я знал, что должен быть более простой способ. Следует упомянуть, что вам нужен этот код в контроллере: '$ scope.tabs = []; $ scope.tabs.activeTab = 0; ' – Carbonski

Ну ссылка plnkr не работает, а также этот ответ, возможно, не работает (по крайней мере, в последних версиях). Если вы установите область действия (например, tabs.activeTab), она начнет первый визуализацию отмеченного в названии области области видимости, но она не будет меняться при каждом изменении вкладки. Ну, я еще не нашел решения на этом, если у вас есть один, пожалуйста, поделитесь :) –

Я нашел несколько взломанных для решения этой проблемы пока. Это не похоже на лучший подход, поэтому, если у кого-то есть лучшая идея, пожалуйста, поделитесь.

Я понял, что директива bsTabs создает атрибуты переключения данных для каждой вкладки. Наблюдая за отображаемым событием передачи данных, я могу распознать изменение вкладки и отобразить div. Код контроллера выглядит так:

$scope.HomeTabSelected = true; 

    function watchTab() { 
     $('a[data-toggle="tab"]').on('shown', function (e) { 
      $scope.$apply($scope.HomeTabSelected = (e.target.innerHTML == "Home")); 
     }) 
    } 

    setTimeout(watchTab, 2000); // setTimeout necessary to allow directive to render

и HTML div использует ng-show.

<div ng-show="HomeTabSelected">Home tab is selected</div>

источник

2013-03-23 00:42:59 Carbonski

Смотрите обновленный код. Вы также можете использовать tabs.activeTab для вкладок, управляемых разметкой –

Как получить активную вкладку AngularStrap?

ответ

Смежные вопросы