在 bootstrap 模式中的按钮单击事件中获取活动选项卡 ID

Question

我有一个 angular js bootstrap 模态 window，其中有两个选项卡。页脚相同，如何识别活动选项卡的 ID 并将其发送到我的提交按钮事件处理程序？

<div class="modal-body">
<tabset justified="true">
    <tab heading="One" id="one"></tab>
    <tab heading="Two" id="two"></tab>
</tabset>
</div>
<div class="modal-footer">
    <button ng-click="doSomething(activeTabId)">Submit</button>
</div>

Answer 1

您可以使用 select() 而不是 ng-click，这是 angular-bootstrap 文档用于 tab 选择的内容。另一个要考虑的注意事项是 tabset 指令和 tab 指令创建一个独立的范围，因此，您需要将 activeId 分配给范围内的对象，以便在其中访问它那些孤立的指令。

注意：这里是关于作用域的FAQ。

HTML

<body ng-controller="MyTabController">
  <tabset justified="true">
    <tab heading="One" id="one" select="tab.activeTabId = 1"></tab>
    <tab heading="Two" id="two" select="tab.activeTabId = 2"></tab>
  </tabset>
</body>

JAVASCRIPT

  .controller('MyTabController', function($scope, $window) {

    // store tab related data in a scope object
    // to avoid problems with isolated scopes
    $scope.tab = {};

  });

演示

angular.module('app', ['ui.bootstrap'])

  .controller('MyTabController', function($scope, $window) {

    $scope.tab = {};

    $scope.submit = function(activeId) {
      $window.alert(activeId);
    };

  });

<!DOCTYPE html>
<html ng-app="app">

<head>
  <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
  <script data-require="angular.js@1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
  <script data-require="angular-bootstrap@*" data-semver="0.13.3" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="MyTabController">

  <tabset justified="true">
    <tab heading="One" id="one" select="tab.activeTabId = 1"></tab>
    <tab heading="Two" id="two" select="tab.activeTabId = 2"></tab>
  </tabset>

  <hr> active id: {{ tab.activeTabId }}
  <hr>
  <br>
  <button type="button" ng-click="submit(tab.activeTabId)" class="btn btn-primary btn-block btn-lg">
      Alert Active Id
    </button>

</body>

</html>

在 bootstrap 模式中的按钮单击事件中获取活动选项卡 ID

get active tab id in button click event inside a bootstrap modal

angularjs

angular-ui-bootstrap