If checkbox unchecked Corresponding field values are posted! AngularJS - html

Question

I have a checkbox ,if checked it has two fields (select tag ,and a textbox).
I also have a multiselect input field. Now out of checkbox and multiselect input atleast one of fields should be required. Problem here is if i Uncheck checkbox values in corresponding fields are posted.. Important checkbox value is scoped variable not to be sent to backend. Please help ..Thanks in Advance.
<div class="col-md-12">
<div class="checkbox c-checkbox">
Config.
<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 && 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 && 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> (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 >= 1000'"/>
<span ng-show="formStep2.$submitted && 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 && 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>
So if i uncheck checkbox corresponding fields should become empty or undefined, it should not be posted.

Answer 1

check this code , it may be help you
function Ctrl($scope) {
$scope.billing_is_shipping = true;
$scope.checked = function(){
console.log($scope.billing_is_shipping)
}
}
<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>

Answer 2

You can use ng-model with the checkbox, then use ng-disabled to listen to that model belonging to the checkboxes.
<input type="checkbox" value="Other" ng-model="myCheckboxes['other']" />
<input type="text" ng-disabled="myCheckboxes['other']" />