AngularJS限制要检查的CheckBox的数量和要输入的TextBox

时间:2016-11-06 11:50:06

标签: javascript angularjs checkbox angularjs-ng-repeat angular-directive

我有一个表单,用户只能有三个选择 表单有10个复选框项和一个自由文本输入。因此,用户有11个选项,用户只能从中选择三个:三个复选框,或两个复选框,并在文本区域中放置一些文本。
如果达到最多三个,或者如果用户选择在文本区域放置一些内容并选择两个复选框,则禁用其他复选框和文本区域,然后禁用其他八个复选框。

这是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模型来捕获复选框和自由文本的响应并将其放在一个模型中?

问题二:

如果有三个选项(其中一个选项也可以是文本区域),如何禁用其他复选框和自由文本?

1 个答案:

答案 0 :(得分:2)

回答您的第一个问题

ArrayList

中使用与Collection.sort键相同的模型

回答您的第二个问题:    使用freetext添加方法myModel.mychosenjobs来处理绑定到shouldDisable指令的方法,如下所示。

<强> HTML

$scope

<强> JS

ng-disabled