AngularJS引导选项卡

Question

下面是我的引导标签的代码。当我单击复选框时，我想删除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>

Answer 1

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

总结一下，保留要显示的选项卡的数组。观看复选框变量，当其值切换时，根据逻辑调整tabs数组。

所以html和controller看起来像这样- （请注意，我已经在tabs数组中使用了isActive属性，该属性用于确定复选框值切换时哪个活动标签）

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

HTML代码段

---

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

控制器代码段

---

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"
        }
      ];
    }
  });
});