The first input value is reflected in the second input field conditionally (based on the flag)

Question

First input field

<input type="text" id="prmnt_a1" ng-model="prmnt_a1" class="customInput" placeholder="Address Line 1"/> 

check box

 <input type="checkbox" id="same" ng-model="same" ng-change="stateChanged(same)"/> 

second entrance

  <input type="text" id="prmnt_a2" ng-model="prmnt_a2" class="customInput" placeholder="Address Line 2"/> 

if the checkbox is set correctly, then the first input value should reflect the second input field.

Answer 1

If you want to do this purely from a view, you can use ng-change :

 <input type="text" id="prmnt_a1" ng-model="prmnt_a1" class="customInput" placeholder="Address Line 1"/> <input type="checkbox" id="same" ng-model="same" ng-change="stateChanged(same); same ? prmnt_a2 = prmnt_a1 : false"/> <input type="text" id="prmnt_a2" ng-model="prmnt_a2" class="customInput" placeholder="Address Line 2"/> 

Please note that this will only set the value of the second input once (when the checkbox is selected), if the user returns to the first input and changes it again, the second input will not be updated, if you want the second input to be updated in this case, then you will also have to add ng-change to the first input:

 <input ng-change="same ? prmnt_a2 = prmnt_a1 : false" type="text" id="prmnt_a1" ng-model="prmnt_a1" class="customInput" placeholder="Address Line 1"/> 

Answer 2

Try this angular code

 $scope.stateChanged = function(same){ if(same == true){ $scope.prmnt_a2 = $scope.prmnt_a1; }else { $scope.prmnt_a2 = ''; } } 

Answer 3

Try this: register the change event handler for the checkbox and enter the input values ​​/ uset

 $(function(){ $('#same').change(function(){ //set input value for checkbox true if($(this).is(':checked')) { $('#prmnt_a2').val($('#prmnt_a1').val()); } else { //clear input box value $('#prmnt_a2').val(''); } }); }); 

Answer 4

I'm not sure, but here is what you can try:

 ng-change="prmnt_a2 = (same)?prmnt_a1:''" 

Here is a complicated but complete HTML way that should work:

 <div ng-if="same==false"> <input type="text" id="prmnt_a2" ng-model="prmnt_a2" class="customInput" placeholder="Address Line 2"/> </div> <div ng-if="same==true"> <input type="text" id="prmnt_a2" ng-init="prmnt_a2=prmnt_a1" disabled ng-model="prmnt_a2" class="customInput" placeholder="Address Line 2"/> </div> 

Note: ng-init is not used as usual, and be sure to use ng-if, not ng-show / hide.

Otherwise, if this does not work: a custom directive or the / $ watch function in the controller. ng-attr just won't work here.

EDIT: for a custom directive, this will look like code:

 .directive('myDirective', function(){ return{ restrict : 'A', scope:{ same:'=myBoolean' value:'=myValue' }, require:'ngModel', link:function(scope, element, attr, ngModelCtrl){ scope.$watch('same', function(newValue){ if(newValue){ ngModel.setViewValue(scope.value); } }); } } } <input type="text" id="prmnt_a2" ng-init="prmnt_a2=prmnt_a1" ng-disabled="same" ng-model="prmnt_a2" my-directive my-boolean="same" my-value="prmnt_a1" class="customInput" placeholder="Address Line 2"/> 

This directive is quite simple. If you need more complex things, check the online documentation.