AngularJS 限制要检查的复选框和输入的文本框的数量

Question

我有一个表单，其中用户只能有三个选择。
该表单有 10 个复选框项目和一个自由文本输入。因此用户有十一个选项，用户只能从中选择三个：三个复选框，或者两个复选框并在文本区域中放置一些文本。
这个想法是，如果达到最多三个，则禁用其他复选框和文本区域，或者如果用户选择在文本区域中放置一些东西并选择两个复选框，则禁用其他八个复选框。

这是 html 模板：

<div class="form-group" ng-class="{'has-error':Form.jobtype.$dirty && Form.jobtype.$invalid, 'has-success':Form.jobtype.$valid}">
    <label class="control-label" translate="jobdata.joblist.title">
        Types of job
    </label>
    :<br/>
    <div ng-repeat="topic in mylist.jobdata.joblist.jobitems">
        <div > {{topic.item}}</div>
        <ul >
            <li ng-repeat="subitem in topic.subitems">
                <input type="checkbox" name="jobtype"
                       ng-model="myModel.mychosenjobs[subitem.key]">
                        {{subitem.values | translate}}

            </li>

        </ul>
    </div>
    <div class="form-group" ng-class="{'has-error':Form.myfreetext.$dirty && Form.myfreetext.$invalid, 'has-success':Form.myfreetext.$valid}">
        <p>or type it in yourself:</p>

        <textarea type="text" class="form-control" name="myfreetext" placeholder="Enter the cooperation type (max of 100 characters)"
                  ng-model="myModel.mychosenfreetext" ng-minlength="5" ng-maxlength="100"></textarea>
        <span class="error text-small block" ng-if="Form.myfreetext.$error.maxlength">Too long!</span>
        <span class="error text-small block" ng-if="Form.myfreetext.$error.minlength">Too short!</span>
    </div>
</div>

在代码中，我有两个 ng-models 这并不理想，因为我想在一个模型中捕获响应并将其保存在我的数据库中的一个地方。

第一个问题：

如何结合上面的 ng-models 来捕获来自复选框和自由文本的响应并将其放在一个模型中？

问题二：

如果做出三个选择（其中一个选择也可以是文本区域），如何禁用其他复选框和自由文本？

Answer 1

第一个问题的答案:

在 myModel.mychosenjobs

中使用带有键 freetext 的相同模型

第二个问题的答案：添加方法 shouldDisable 和 $scope 来处理绑定到 ng-disabled 指令的方法，如下所示。

HTML

<div class="form-group" ng-class="{'has-error':Form.jobtype.$dirty && Form.jobtype.$invalid, 'has-success':Form.jobtype.$valid}">
    <label class="control-label" translate="jobdata.joblist.title">
        Types of job
    </label>
    :<br/>
    <div ng-repeat="topic in mylist.jobdata.joblist.jobitems">
        <div > {{topic.item}}</div>
        <ul >
            <li ng-repeat="subitem in topic.subitems">
                <input type="checkbox" name="jobtype" ng-disabled="shouldDisable(subitem.key)" ng-model="myModel.mychosenjobs[subitem.key]">
                        {{subitem.values | translate}}

            </li>

        </ul>
    </div>
    <div class="form-group" ng-class="{'has-error':Form.myfreetext.$dirty && Form.myfreetext.$invalid, 'has-success':Form.myfreetext.$valid}">
        <p>or type it in yourself:</p>

        <textarea type="text" class="form-control" name="myfreetext" placeholder="Enter the cooperation type (max of 100 characters)" ng-disabled="shouldDisable('freetext')" ng-model="myModel.mychosenjobs.freetext" ng-minlength="5" ng-maxlength="100"></textarea>
        <span class="error text-small block" ng-if="Form.myfreetext.$error.maxlength">Too long!</span>
        <span class="error text-small block" ng-if="Form.myfreetext.$error.minlength">Too short!</span>
    </div>
</div>

JS

$scope.shouldDisable = function(key) {
   if(!$scope.myModel.mychosenjobs[key]) {
      var count = 0;
      Object.keys($scope.myModel.mychosenjobs).forEach(function(key) {
         if($scope.myModel.mychosenjobs[key]) {
            ++count;
         }
      });

      if(count >= 3) {
         return true;
      }
   }

   return false;
};

AngularJS 限制要检查的复选框和输入的文本框的数量

AngularJS to limit number of CheckBoxes to be checked and TextBox to input

javascript

checkbox

angularjs

angularjs-ng-repeat

angular-directive

第一个问题：

问题二：