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 простым.

Подводя итог, сохраните массив отображаемых вкладок.Посмотрите на переменную checkbox, когда ее значение переключится, настройте массив tabs в соответствии с вашей логикой.

Чтобы html и контроллер выглядели примерно так - (Обратите внимание, что я использовал атрибуты isActive внутри массива tabs, которыйиспользуется для определения, какая будет активная вкладка при переключении значения флажка)

Полный код - 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"
        }
      ];
    }
  });
});