Question

我有一个复选框，如果选中它有两个字段（选择标记和文本框）。我还有一个多选输入字段。现在，除了复选框和多选输入之外，至少需要一个字段。这里的问题是，如果我取消选中相应字段中的复选框值已发布..重要复选框值是作用域变量，不发送到后端。请帮助..谢谢你。

     <div class="col-md-12">
            <div class="checkbox c-checkbox">
                Config.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <label><input name="checkbox" type="checkbox" checked="" value=""
                              ng-model="isChecked"
                              ng-required="!(isChecked|| trapList.length)"
                />
                    <span class="fa fa-check"></span></label>
            </div>
        <span ng-show="formStep2.$submitted &amp;&amp; formStep2.checkbox.$invalid"
              class="text-danger">This field is required</span>
        </div>

        <div ng-if="isChecked==true">
            <div class="col-md-6"  ng-if="isChecked==true">
                <label class="control-label">SNMP Config.</label>
                <select name="snmpConfig" id="snmpConfig"
                        ng-required="isChecked"
                        ng-model="$parent.$parent.snmpConfig"
                        class="chosen-select form-control">
                    <option value="" disabled selected>Select the SNMP COnfig.
                    </option>
                    <option value={{snmpConfig._id}} ng-repeat="snmpConfig in snmpConfigs">
                        {{snmpConfig.name}}
                    </option>
                </select>
                <span ng-show="formStep2.$submitted &amp;&amp; formStep2.snmpConfig.$invalid"
                      class="text-danger">This field is required</span>
            </div>
            <div class="col-md-6"  ng-if="isChecked==true">
                <label class="control-label">Get Frequency
                    <small>&nbsp;&nbsp;(in milliseconds)</small>
                </label>
                <!--ng-required="protocol == 'SNMP'"-->
                <input type="text" name="snmpGetFrequency" id="snmpGetFrequency"
                       class="form-control"
                       ng-required="isChecked"
                       onkeypress='return event.charCode >= 46 && event.charCode <= 57'
                       maxlength="20" ng-model="$parent.$parent.snmpGetFrequency"
                       ui-validate="'$value &gt;= 1000'"/>
            <span ng-show="formStep2.$submitted &amp;&amp; formStep2.snmpGetFrequency.$invalid"
                  class="text-danger">Minimum required value = 1000</span>
            </div>
        </div>
        <div class="col-md-12">
            <label>Select Traps</label>
            <select id="trapList" name="trapList" ng-model="$parent.$parent.trapList"
                    ng-required="!(isChecked||trapList.length) "
                    chosen="" class="form-control"
                    multiple="multiple">
                <option value="{{trap._id}}" ng-repeat="trap in snmpTraps">{{trap.name}}
                </option>
            </select>
        <span ng-show="formStep2.$submitted &amp;&amp; formStep2.trapList.$invalid"
              class="text-danger">This field is required</span>
            <!--<span ng-show="form.validateInput('chosen', 'required')" class="text-danger">This field is required</span>-->
        </div>
    </div>

因此，如果我取消选中复选框，相应的字段应该变为空或未定义，则不应发布。

Answer 1

检查此代码，它可能对您有所帮助

＆＃13;

function Ctrl($scope) {
    $scope.billing_is_shipping = true;
    
    $scope.checked = function(){
        console.log($scope.billing_is_shipping)
    }
}

＆＃13;

<div ng-app ng-controller="Ctrl">
    <div ng-include src="'template.html'"></div>
</div>

<script type="text/ng-template" id="template.html">
    <input type="checkbox" ng-model="$parent.billing_is_shipping" ng-change="checked()"/>
</script>

＆＃13;

Answer 2

您可以将ng-model与复选框一起使用，然后使用ng-disabled来收听属于复选框的模型。

<input type="checkbox" value="Other" ng-model="myCheckboxes['other']" />
<input type="text" ng-disabled="myCheckboxes['other']" />

如果未选中复选框，则会发布相应的字段值！ AngularJS

2 个答案: