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>

然后我在它下面有一个按钮，如下所示，我只有在选中所有复选框时才需要启用此按钮。请注意，此标记位于动态加载的模态窗口中。我通过做一些基本的逻辑更改尝试了这个网址发布的方式，使其按照我的需要工作 - ＆gt; How to check if any Checkbox is checked in Angular。当视图被动态加载并且观察者在无法找到它时在控制台中抛出错误时，它似乎不起作用。

<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个条件都为真的情况下才会显示该按钮。

我个人使用的另一种选择是checklist-model添加。使用它，您可以将所有复选框添加到单个数组模型中，然后只需检查长度：

为每个复选框提供模型：

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

正如保罗指出的那样，你也可以使用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>

如果在angular.js中为动态加载的视图选中了所有复选框，则如何启用该按钮

3 个答案: