0

$scope.tabs を使用して、ブラウザ ウィンドウ内の 2 つのタブを制御しています

$scope.tabs = [
  {heading: 'Setup', active: true, disabled: false},
  {heading: 'Editor', active: false, disabled: true},
]

ユーザーがボタンをクリックすると、2番目のタブを有効にしてそれに切り替えるcontinue関数を呼び出しています

$scope.continue = function () {
  $scope.tabs[1].disabled = false;
  $scope.tabs[1].active = true;
}

ただし、ボタンをクリックすると、タブは有効になりますが、ブラウザには表示されません。もう一度クリックすると、タブが表示されます。tabs[1] を有効にする前に、tabs[0] active を false に設定しようとしましたが、どちらのタブも表示されない空白スペースが発生します。

どんな考えでも大歓迎です

ハ

4

1 に答える 1

2

どうぞ：

デモPlunker

HTML

<div ng-controller="MyCtrl">

 <a href="" ng-click="continue()">click me</a>

<tabset >
        <tab ng-repeat="tabItem in tabs" 
        heading="{{tabItem.heading}}"
        active="tabItem.active"
        disabled="tabItem.disabled"
        >
            {{tabItem.content}}
        </tab>

    </tabset>
</div>

JS

var myApp = angular.module('myApp', ['ui.bootstrap']);

   myApp.controller('MyCtrl', function($scope) {
   $scope.tabs = [
        {heading: 'Setup', active: true, disabled: false, content: "This is Setup"},
        {heading: 'Editor', active: false, disabled: true, content: "This is Editor"}        
    ];

    $scope.continue = function () {
      // just to switch flags
      $scope.tabs[0].disabled = !$scope.tabs[0].disabled; 
      $scope.tabs[0].active = !$scope.tabs[0].active;

      $scope.tabs[1].disabled = !$scope.tabs[1].disabled;  
      $scope.tabs[1].active = !$scope.tabs[1].active;
    };

  });
于 2013-10-17T12:26:11.553 に答える