reflect first input value to second input field conditionally (based on checkbox)

Question

First input field

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

checkbox

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

second input

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

if checkbox is true then first input value should reflecting to second input field.

Answer 1

Try this angular code

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

Answer 2

If you want to do it purely from the view then 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"/>

Note that this will only set the value of the second input once (when the checkbox is checked), if the user goes back to the first input and changes it again the second input won't update, if you want the second input to update in that case as well then you will have to add an ng-change to the first input too:

<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 3

Try this :Register a change event handler for checkbox and set / uset input values

$(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 soe things you can try :

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

Here is a tricky but full 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 made to be used like this usually and be sure to use ng-if and not ng-show/hide.

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

EDIT : for a custom directive this is what would look like the 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 fairly basic. If you need more complex stuff, check documentation on the net.