Angular-ui-bootstrap-无法禁用ng-repeat内的选项卡 [英] Angular-ui-bootstrap -- unable to disable tabs inside ng-repeat

问题描述

全部.

我正在使用angular和ui-bootstrap创建选项卡菜单，(希望)用户可以在该菜单上启用/禁用他们不需要的选项卡.我试图非常严格地遵守模板代码，并实现了自己的功能以禁用单击选项卡，但是我无法使选项卡以与示例中相同的方式进行响应.我一直在阅读，可能会认为它与ng-repeat创建自己的作用域有关，但我尚未解决.任何帮助将不胜感激！

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.

相关控制器代码:

$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');
};

相关html(此处仅包括我的内容):

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>

顺便说一句，当我运行代码并单击自己的按钮以禁用/启用选项卡时(我意识到我只是使用$ scope.disableTab函数进行了编码，以禁用此功能)，我得到的是正确的控制台输出，即'单击订单"按钮，依此类推.应该禁用索引0的索引"标签.

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!

推荐答案

对于 tab 指令，则应使用disable属性

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

这篇关于Angular-ui-bootstrap-无法禁用ng-repeat内的选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！