Question

所有

我正在使用angular和ui-bootstrap创建一个选项卡菜单，希望用户能够启用/禁用他们不需要的选项卡。我试图非常贴近模板代码，并实现我自己的功能来禁用点击标签，但我还没有能够让我的标签响应他们在示例中的相同方式。我一直在阅读，并猜测它与ng-repeat创建自己的范围有关，但我还没有解决它。任何帮助将不胜感激！

我试图在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（仅限我的）：

  <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处的＆＃39;标签＆＃39;当我点击Orders按钮时，依此类推。

如果您有任何建议，请提前感谢您！

Answer 1

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

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

Angular-ui-bootstrap - 无法禁用ng-repeat内的制表符

1 个答案: