Angular-ui-bootstrap - 無法禁用ng中的標籤 - 重複

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處的選項卡應該被禁用'，當我點擊訂單按鈕時​​，依此類推。

預先感謝您的任何建議！

Answer 1

對於tab指令，你應該使用disable屬性

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