Question

我有一个角度js bootstrap模态窗口，其中有两个选项卡。页脚是相同的，如何识别活动选项卡的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

您可以使用ng-click select()文档用于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 = {};

  });

<强>样本

＆＃13;

angular.module('app', ['ui.bootstrap'])

  .controller('MyTabController', function($scope, $window) {

    $scope.tab = {};

    $scope.submit = function(activeId) {
      $window.alert(activeId);
    };

  });

＆＃13;

<!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>

＆＃13;

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

1 个答案: