Angularjs 引导选项卡答案

【问题标题】：Angularjs bootstrap tabAngularjs 引导选项卡
【发布时间】：2018-12-12 16:51:52
【问题描述】：

下面是我的引导标签代码。当我单击复选框时，我想删除 1,2 个选项卡并添加 1 个新选项卡。那就是我已经处理过了。但是活动的选项卡内容无法正常工作。它还会显示其他选项卡内容。

 <input type="checkbox" id="enableDirectBalance" ng-model="enableDirectBalance" />
           <ul class="nav nav-tabs">
                <li ng-if="!enableDirectBalance" ng-class="{active:!enableDirectBalance}"><a data-toggle="tab" href="#A">Auth</a></li>
                <li ng-if="enableDirectBalance" ng-class="{active:enableDirectBalance}"><a data-toggle="tab" href="#B">DirectBalance</a></li>
                <li ng-if="!enableDirectBalance"><a data-toggle="tab" href="#C">Balance</a></li>
                <li ><a data-toggle="tab" href="#D">Redeem</a></li>
                <li ><a data-toggle="tab" href="#E">Void</a></li>
            </ul>

            <div class="tab-content">
                <div id="A" class="tab-pane  "  ng-class="{active:!enableDirectBalance}">

                </div>
                <div id="B" class="tab-pane  "  ng-class="{active:enableDirectBalance}">

                </div>
                <div id="C" ng-if="!enableDirectBalance" class="tab-pane  ">

                </div>
                <div id="D"  class="tab-pane  ">

                </div>
                <div id="E" class="tab-pane  ">

                </div>
            </div>

【问题讨论】：

ng-if="!enableDirectBalance" 在标签内容的
假设我在 tabE 上并且我在那个时候点击了复选框 2 选项卡将是活动的
你应该使用一个计数器来限制你想要的标签数量，并给每个标签一个数字（例如 1-5），有一个增量器，你可以在每个标签上去 ng-if="counter === tabnum" 这将解决你在e上并想回到a的问题

标签： angularjs twitter-bootstrap-3

【解决方案1】：

IMO，一种更优雅的方法是处理在 angularJs 控制器中显示哪些选项卡的逻辑并保持 html 简单。

总而言之，保留一组要显示的选项卡。观察复选框变量，当其值切换时，根据您的逻辑调整选项卡数组。

所以 html 和控制器看起来像这样 - （注意我在tabs数组中使用了isActive属性，用来决定复选框值切换时哪个是活动标签）

完整代码 - https://codepen.io/sarthakj178/pen/MZwZqw

HTML 代码 sn-p

<input type="checkbox" id="enableDirectBalance" ng-model="enableDirectBalance" />
  <ul class="nav nav-tabs">
    <li ng-repeat="tab in tabs" ng-class="{active: tab.isActive}">
      <a data-toggle="tab" href="#{{tab.href}}">
        {{tab.title}}
      </a>
    </li>
  </ul>

  <div class="tab-content">
    <div ng-repeat="tab in tabs" id="{{tab.href}}" class="tab-pane" ng-class="{active: tab.isActive}">{{tab.content}}
    </div>
  </div>

控制器代码 sn-p

var myApp = angular.module("myApp", []);

myApp.controller("MyController", function($scope) {
  $scope.tabs = [];
  $scope.$watch("enableDirectBalance", function(enableDirectBalance) {
    if (enableDirectBalance) {
      $scope.tabs = [
        {
          href: "B",
          title: "DirectBalance",
          isActive: true,
          content: "Direct Balance Content"
        },
        {
          href: "D",
          title: "Redeem",
          content: "Redeem Content"
        },
        {
          href: "E",
          title: "Void",
          content: "Void Content"
        }
      ];
    } else {
      $scope.tabs = [
        {
          href: "A",
          title: "Auth",
          isActive: true,
          content: "Auth Content"
        },
        {
          href: "C",
          title: "Balance",
          content: "Balance Content"
        },
        {
          href: "D",
          title: "Redeem",
          content: "Redeem Content"
        },
        {
          href: "E",
          title: "Void",
          content: "Void Content"
        }
      ];
    }
  });
});

【讨论】：