javascript - 仅当在 angular.js 中选中所有复选框以获取动态加载 View 时，如何启用按钮

Question

我在 angular.js 中有以下 View ，其中有多个复选框用于协议(protocol)的各种条款。

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

然后我在它下面有一个按钮，如下所示，只有当所有复选框都被选中时，我才需要启用这个按钮。请注意，此标记出现在动态加载的模态窗口中。我已经尝试了通过做一些基本的逻辑更改以使其根据我的需要工作-> How to check if any Checkbox is checked in Angular 在此 url 中发布的方式。 .当动态加载 View 时，它似乎无法正常工作，当观察器无法找到它时，它会在控制台中抛出错误。

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

正如 Paul 所指出的，您还可以使用 ng-disabled="agreement.length < 6"如果你想禁用按钮而不是完全隐藏它，而不是 ng-if。