Angular js - Clone data realtime from one field to another

Question

Trying to figure out form related angular technique. Im new to angularjs and started digging deep into it.

Well im trying to get current and permanent address in a form. When the "same as current" checkbox is checked then value of current address field is written in permanent address field ng-value.

While permanent address field is typed first and then we checked "same as current" not overwriting field from current address ng-value.

Current Address field

  <input type="text" class="h-textform form-control" id="exampleInputEmail3" name="current_address_line1" ng-model="contacts.current_address_line1" placeholder="House Number">

checkbox :

<input type="checkbox" value="disable" checked="checked" ng-model="sameascurrent">Same as Current

Permenent Address :

    <input type="text" class="h-textform form-control" ng-if="sameascurrent"  id="exampleInputEmail3" ng-value="contacts.current_address_line1" name="permenent_address_line1" ng-model="contacts.permenent_address_line1" ng-disabled="sameascurrent" placeholder="House Number">
    <input type="text" class="h-textform form-control" ng-if="!sameascurrent"  id="exampleInputEmail3"  name="permenent_address_line1" ng-model="contacts.permenent_address_line1" ng-disabled="sameascurrent" placeholder="House Number">

Any help would be appreciated.

http://plnkr.co/edit/rX3iT5lX2JEIArvxL8SK?p=preview

Sorry for not mentioning, there is a default checked for 'same as current ' and so i used 'ng-value' to get typing realtime in permanent field. — Ram Kannan Raj
– Ram Kannan Raj, Commented Jun 14, 2016 at 7:32

Łukasz · Accepted Answer · 2016-06-14 07:07:19Z

Move overwriting logic to controller. For permanent address use similar inputs as for current (no ng-value only ng-model) plus ng-disabled.

<input type="text" class="h-textform form-control"  id="exampleInputEmail3" name="permenent_address_line1" ng-model="contacts.permenent_address_line1" ng-disabled="sameascurrent" placeholder="House Number">

<input type="text" class="h-textform form-control"  id="exampleInputEmail3"  name="permenent_address_line2" ng-model="contacts.permenent_address_line2" ng-disabled="sameascurrent" placeholder="Street Name">

Add ng-change to checkbox input:

<input type="checkbox" ng-change="change()" value="disable" checked="checked" ng-model="sameascurrent">Same as Current

and function called when checkbox is changed in controller. This function overwrites model of permanent address if sameascurrent is true.

$scope.change = function () {
  if ($scope.sameascurrent) {
      $scope.contacts.permenent_address_line1 = $scope.contacts.current_address_line1;
      $scope.contacts.permenent_address_line2 = $scope.contacts.current_address_line2;
  }
}

See http://plnkr.co/edit/aEuG62gaUh5U4Xl5ZUTv?p=preview

Drag13 · Accepted Answer · 2016-06-14 06:43:55Z

0

<input type="text" class="h-textform form-control" ng-if="sameascurrent"  id="exampleInputEmail3" !!ng-value="contacts.current_address_line1"!! name="permenent_address_line1" ng-model="contacts.permenent_address_line1" ng-disabled="sameascurrent" placeholder="House Number">

Remove ng-value from input. Ng-value is used to set values like objects to the radio box or smth like this.

UPD: Just remember. When you are using ng-model, this means that value from input will be dynamicly set to the your model. So you can bind it from model to anywhere you wont

answered Jun 14, 2016 at 6:43

Drag13

6,0281 gold badge22 silver badges44 bronze badges

Comments

Yelei Wang · Accepted Answer · 2016-06-14 07:28:30Z

0

ng-value just set the filed once, for realtime data clone,you can write your own $watch method inside the controller:

function sync(){
 if($scope.sameascurrent){
    var contacts = $scope.contacts;
    contacts.permenent_address_line1 = contacts.current_address_line1;
    contacts.permenent_address_line2 = contacts.current_address_line2;
 }
}
$scope.$watch('contacts',sync,true);
$scope.$watch('sameascurrent',sync);

http://plnkr.co/edit/EPoprBLeNxlwDlklWuiC?p=preview

For more detail on $watch, you can refer angular docs for $scope

edited Jun 14, 2016 at 7:28

answered Jun 14, 2016 at 7:10

Yelei Wang

113 bronze badges

Collectives™ on Stack Overflow

Angular js - Clone data realtime from one field to another

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related