僅當在angular.js中選中了所有復選框以獲取動態加載的視圖時，才如何啟用按鈕

Question

我在angular.js中有以下視圖，其中有多個復選框用於協議的各個條款。

<div class="modal-body">
<div class="col-xs-12 form-group">
    <p>I acknowledge that I understand the following:</p>
    <div class="checkbox" >
        <label>
          <input type="checkbox" ng-model="agreement.term1">Some term1 goes here
        </label>
    </div>
    <div class="checkbox" >
        <label>
          <input type="checkbox" ng-model="agreement.term2"> Some term2 goes here 
          is not a credit transaction.
        </label>
    </div>
    <div class="checkbox" >
        <label>
          <input type="checkbox" ng-model="agreement.term3"> Some term3 goes here
        </label>
    </div>
    <div class="checkbox" >
        <label>
          <input type="checkbox" ng-model="agreement.term4"> Some term4 goes here
        </label>
    </div>
    <div class="checkbox">
        <label>
          <input type="checkbox" ng-model="agreement.term5"> Some term5 goes here
        </label>
    </div>
    <div class="checkbox" >
        <label>
          <input type="checkbox" ng-model="agreement.term6"> Some term6 goes here
        </label>
    </div>

</div>

然后，我在其下方有一個按鈕，如下所示，只有在選中所有復選框時，才需要啟用此按鈕。 請注意，此標記來自動態加載的模式窗口。 我已經嘗試通過做一些基本的邏輯更改以使其按照我的需要工作-> 如何檢查是否在Angular中選中了任何復選框 ，從而嘗試了在此url中發布的方式。 當動態加載視圖時，似乎無法正常工作；如果找不到，觀察者會在控制台中引發錯誤。

<div class="modal-footer">
<button type="button" class="btn btn-primary pull-left" data-dismiss="modal" ng-click="$close();">Confirm</button></div>

Answer 1

由於目前已設置好，因此應該可以：

<button type="button" class="btn btn-primary pull-left" data-dismiss="modal" ng-click="$close();" ng-if="agreement.term1 && agreement.term2 && agreement.term3 && agreement.term4 && agreement.term5 && agreement.term6">Confirm</button>

使用ng-if ，只有在所有6個條件都為真時才顯示按鈕。

我個人使用的另一個替代方法是清單模型添加。 使用此功能，您可以將所有復選框添加到單個數組模型中，然后像這樣檢查長度：

為每個復選框指定模型：

<div class="checkbox" >
        <label>
          <input type="checkbox" checklist-model="agreement" checklist-value="true"> Some term1 goes here
        </label>
    </div>

// Repeat for all checkboxes



<button type="button" class="btn btn-primary pull-left" data-dismiss="modal" ng-click="$close();" ng-if="agreement.length === 6">Confirm</button>

正如Paul所指出的，如果您要禁用按鈕而不是完全隱藏按鈕，則也可以使用ng-disabled="agreement.length < 6"代替ng-。

Answer 2

將以下功能添加到您的范圍：

$scope.submitDisabled = function() {
   var allChecked = $scope.agreement.term1 && $scope.agreement.term2 &&
                    $scope.agreement.term3 && $scope.agreement.term4 &&
                    $scope.agreement.term5 && $scope.agreement.term6;
   return !allChecked;
}

然后為您執行按鈕：

<button type="button" ... ng-disabled="submitDisabled()">Confirm</button>

假設您希望按鈕可見，但是被禁用而不是隱藏。

Answer 3

嘗試了幾種方法，但遵循方法對我有用。 我沒有使用觀察程序，而是在單擊時調用了復選框周圍的視圖的函數。

以下是功能：

$scope.agreement.doIfChecked = doIfChecked; 
function doIfChecked(){
    $scope.agreement.isAnyUnchecked = !($scope.agreement.term1 && $scope.agreement.term2 && $scope.agreement.term3 && $scope.agreement.term4 && $scope.agreement.term5 && $scope.agreement.term6);  
}

我已經使用ng-click指令將輸入框的父div如下所示：

<div class="checkbox" ng-click='agreement.doIfChecked();'>
        <label>
          <input type="checkbox" ng-model="agreement.term1"> Some term1 goes here.
        </label>
    </div>
    <div class="checkbox" ng-click='agreement.doIfChecked();'>
        <label>
          <input type="checkbox" ng-model="agreement.term2"> Some term2 goes here.
        </label>
    </div>

並且按鈕的標記如下所示，其中我正在適當地使用ng-disabled指令：

<div class="modal-footer">
<button type="button" class="btn btn-primary pull-left" data-dismiss="modal" ng-disabled="agreement.isAnyUnchecked" ng-click=" $close();">Confirm</button>