Get HTML element data in AngularJS script

Question

I am new to AngularJS and trying to design a page which will have two text fields and two radio buttons.

First text field is for current address, followed by radio buttons(one for Yes and second for No), and last component would be permanent address text field. First, user will enter the value in current address text field, after that if user selects yes radio button then it should copy the data from current address to permanent address text field, if user selects No then it should do nothing. Below is the sample code I have written:

*<input type="text" name="cAddress" ng-model="cAddress" required/>
<input type="radio" name="opt" ng-click="copyAddress(true)" />
<input type="radio" name="opt" ng-click="copyAddress(false)" />
<input type="text" name="pAddress" ng-model="pAddress" required/>*

Below is the script code inside controller:

$scope.copyAddress = function(flag) {
   if(flag) {
      $scope.pAddress = $scope.cAddress;
   }
};

when I tried to print $scope.cAddress and $scope.pAddress values in console then it displayed undefined. Even $scope does not have cAddress and pAddress.

Therefore, the main problem is that I am not getting element data inside AngularJS controller

Please find plunker url: http://plnkr.co/edit/Ub2VEn01HxwDpnCg4tLi?p=preview Click on Next to navigate to Second tab, there you will find the yes and no radio button to copy the data.

I have minized the code, please look into it. To understand the flow, you can read the README file. http://plnkr.co/edit/TzJsZIRxAyTuFdCXLFFV?p=preview

Strange.. Can you show me some more html.. and is the controller properly set in relevant tag and this form is under that tag.. — Minato
– Minato, Commented Nov 10, 2015 at 11:07
You are breaking the golden rule of always using an object in ng-model. Objects have inheritance, primitives don't — charlietfl
– charlietfl, Commented Nov 10, 2015 at 11:07
@charlietfl I think it's not the issue, but nonetheless its a very good point.. — Minato
– Minato, Commented Nov 10, 2015 at 11:11
@Minato it most probably is the issue. If there is a child scope involved it would explain OP's issue — charlietfl
– charlietfl, Commented Nov 10, 2015 at 11:13

Abhilash Augustine · Accepted Answer · 2015-11-10 12:16:30Z

1

Try using another scope object.

That is, create a scope object and add property to it for each input like,

$scope.myObject = {}; // Empty scope variable
$scope.myObject.cAddress = ""; // initialize your model for the input.

And now you should use this variable for your input.

<input type="text" name="cAddress" ng-model="myObject.cAddress" required/>

Try this. It may help you.

answered Nov 10, 2015 at 12:16

Abhilash Augustine

4,2081 gold badge26 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Libu Mathew Over a year ago

Bro actually the code given in the question is correct.

Dark Army · Accepted Answer · 2015-11-10 13:07:46Z

0

Html code:

<body ng-controller='Maincontroller'>
  <input type="text" name="cAddress" ng-model="cAddress" />
  <input type="radio" name="opt" ng-click="copyAddress(true)" />
  <input type="radio" name="opt" ng-click="copyAddress(false)" />
  <input type="text" name="pAddress" ng-model="pAddress" />
</body>

Controller code:

 var app = angular.module('main', []);
app.controller('Maincontroller', ["$scope",
  function($scope) {

    $scope.copyAddress = function(flag) {
      if (flag) {
        $scope.address1 = $scope.address;
      } else {
        $scope.address1 = "";
      }
    };
  }
]);

edited Nov 10, 2015 at 13:07

answered Nov 10, 2015 at 12:55

Dark Army

2684 silver badges15 bronze badges

4 Comments

Ravi Nain Over a year ago

Hi Dark Army, I have tried again and it is working in the sample example which I have created in below plunker : plnkr.co/edit/dq6Qj7UWxNwGVGsnK6Xy?p=preview However, it is not working for my another practice example, please check in below plunker url: plnkr.co/edit/Ub2VEn01HxwDpnCg4tLi?p=preview

Dark Army Over a year ago

@RaviNain:If you could tell me which js and html to look for it will save a lot of time and line number

Ravi Nain Over a year ago

regCtrl.js : Line 113 regAddressAndContact.html : Line 1 and 34 are relevant to my question

Ravi Nain Over a year ago

I have minized the code on this plunk. plnkr.co/edit/TzJsZIRxAyTuFdCXLFFV?p=preview

Collectives™ on Stack Overflow

Get HTML element data in AngularJS script

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related