如何基於在AngularJS/Bootstrap3

我創建一個表單，用戶可以配置重複發生的事件複選框來禁用內容，所以有大量的控制。頂部是一個用於啓用/禁用時間表的複選框。如何基於在AngularJS/Bootstrap3

如何禁用，但不能掩蓋的基礎上，複選框整節？如果選中，用戶應該能夠對日程進行修改。如果未檢查，則不應允許進行更改。

我相當肯定，我可以用NG-禁用指令上的每個控件，但我想設置一些屬性/類整個容器上，而不是在每個單獨的控制。

我使用自舉3，因此，如果有，將提供此功能的類，這將是可接受的解決方案，以及。

下面是HTML的相關章節：

<input type="checkbox" ng-model="status" title="Enable/Disable Schedule" /> <b>Schedule the task to run:</b> 
<div class="row"> <!-- need a way to disable this row based on the checkbox --> 
    <span>Every <input type="number" ng-model="interval" /> 
     <select ng-model="frequency" 
       ng-options="freq as freq.name for freq in frequencies"></select> 
    </span> 
    <div> 
     On these days: 
    </div> 
    <div class="btn-group" data-toggle="buttons-checkbox"> 
     <button type="button" 
       class="btn" 
       ng-model="day.value" 
       ng-repeat="day in days">{{day.name}}</button> 
    </div> 
</div>

我曾嘗試：

<div class="row" ng-disabled="!status">

它沒有工作，以及基於文檔，它看起來並不像它甚至應該，因爲其預期的用途是禁用窗體控件。我也試過沒有!，只是爲了驗證它也不行。

來源

2014-01-23 Nick

歡迎來到SO！請修改您的問題，以包含與您的問題相關的代碼位，例如您的表單部分帶有複選框，要禁用的部分以及您嘗試用來實現您的目標的任何其他相關代碼。 – Derek

'ng-disabled'是要走的路，如果您不想將該屬性添加到每個表單元素，您可以創建一個禁用其中包含的每個表單元素的指令。 –

OK，我發現，我的目的，適用的技術...

<div class="row" ng-class="{disabled: !status}"> <!-- added ng-class here -->

和

.disabled { 
    z-index: 1000; 
    background-color: lightgrey; 
    opacity: 0.6; 
    pointer-events: none; 
}

這可以防止在頁面上點擊並給出了部分被「的一個很好的視覺指示禁用」。它並不阻止我通過控件來切換，但對我的目的來說它工作正常。

來源

2014-01-24 04:50:56 Nick

如何基於在AngularJS/Bootstrap3

回答

相關問題