Angular-ui-bootstrap -- unable to disable tabs inside ng-repeat

Question

all.

I am using angular and ui-bootstrap to create a menu of tabs on which (hopefully) a user can enable/disable tabs that they do not need. I have tried to adhere pretty closely to the template code, as well as implementing my own functions to disable the tabs on click, but I haven't been able to get my tabs to respond the same way that they do in the example. I have been reading around and would guess that it has something to do with the ng-repeat creating its own scope, but I haven't solved it yet. Any help would be much appreciated!

I have tried to demonstrate what I am dealing with in this plunker.

Relevant controller code:

$scope.theirTabs = [
  { title:'Dynamic Title 1', content:'Dynamic content 1' },
  { title:'Dynamic Title 2', content:'Dynamic content 2', disabled: true }
];

$scope.myTabs = [
  { title:'Orders',
    content: {
      description: 'DESCRIPTION',
      poNumber: 'PO_NUMBER',
      origFacility: 'ORIGIN_FACILITY',
      destName: 'D_NAME',
      destCity: 'D_CITY' , 
      transitType: 'TRAN_TYPE',
      transitCode: 'TRAN_CODE'
    }, 
    disabled: false
  },
  { title:'Inventory', 
    content: {
      createdDateTime: 'CREATED_DATE_TIME',
      userName: 'USER_NAME'
    },
    disabled: false
  },
  { title:'Items',
    content: {
      allocatedQty: 'ALLOCATED_QTY',
      unitsPacked: 'UNITS_PAKD',
      shippedQty: 'SHIPPED_QTY'
    },
    disabled: false
  },
  { title:'Activity', 
    content: {
      orderNumber: 'ORDER_NUMBER',
      poNumber: 'PO_NUMBER',
      origFacility: 'ORIGIN_FACILITY'
    },
    disabled: true
  }
];

$scope.disableTab = function(tab, index) {
  tab.disabled = true;
  console.log('tab at index ' + index + ' should be disabled');
};

Relevant html (only mine included here):

  <div class="row">
    <div ng-repeat="tab in myTabs track by $index" class="select-tables-checkboxes col-md-3">
      <!-- <label for="select-tables">{{tab.title}}</label> -->
        <button type="button"
               name="select-tables"
               id="select-tables" 
               ng-click="myTabs[$index].disabled = ! myTabs[$index].disabled">Enable / Disable {{tab.title}}
          <!-- also tried ng-click="disableTab(tab, $index)" -->
    </div>
  </div>
  <tabset>
    <tab ng-repeat="tab in myTabs" heading="{{tab.title}}" active="tab.active" ng-disabled="tab.disabled">
      <!-- <div class="row" ng-repeat="(key, value) in content track by $index"></div> -->
        <div class="row" ng-repeat="(k, v) in tab.content">
          <div class="column-exists-checkbox col-md-1">
            <input type="checkbox"
                   name="column-exists"
                   id="column-exists" 
                   ng-model="columnExists">
          </div>
          <div class="column-description col-md-4">
            <p class="column-description"><strong>{{k}}</strong></p>
          </div>
          <div class="column-name col-md-7">
            <input type="text"
                   name="column-name"
                   id="column-name" 

                   value="{{v}}">
          </div>
        </div>
     <!--  </div> -->
    </tab>
  </tabset>

Incidentally, when I run my code and click my own buttons to disable/enable tabs (which I realize I've only coded to disable with the $scope.disableTab function), I am getting the correct console output, i.e. 'tab at index 0 should be disabled' when I click the Orders button, and so on.

Thank you in advance for any suggestions you may have!

logee · Accepted Answer · 2015-07-13 03:14:00Z

2

For the tab directive, you should be using the disable attribute

<tab ng-repeat="tab in myTabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">

answered Jul 13, 2015 at 3:14

logee

5,0321 gold badge29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Bennett Adams Over a year ago

You're correct, and thank you, but I started out using that in my code, and it doesn't work. Which is what has set me down the path of trying ng-disabled and custom functions. It actually does work in the plunker, but when I copy the working code directly into my app code, the tab headings do not respond. They are laying out correctly and everything else is as it should be, so I'm a little perplexed.

logee Over a year ago

Really? I've forked you plunker and the disabled toggles as expected with I click the enable/disable button

Bennett Adams Over a year ago

Well, the plunkr/app discrepancy led me down the path of figuring out the issue, which was that the framework I am working on had ui-bootstrap 0.12.0 as a dependency, and the plunker was using 0.13.0. I updated the app to 0.13.0, and it's working as it's supposed to. Phew! Thank you!

fsi Over a year ago

The only bad thing about disable is that ie8 and ie9 put all the css in gray.

Collectives™ on Stack Overflow

Angular-ui-bootstrap -- unable to disable tabs inside ng-repeat

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related