AngularJS - How to pass data from View (HTML) to Controller (JS)

Question

I am really new to AngularJS. I want to pass some object from View (HTML) to my controller (JS). Actually my Client will send me data in HTML and I have to take that data and process that data in my controller and then display the processed output on screen. He will be using some back-end technology called ServiceNow - https://www.servicenow.com/ .

All the solutions I saw had some event like click event or change event, but in my case this has to be done on page load.

I m using Input type hidden for passing the data to the controller, seems like it's not working. So is there any other way I can do this ? Here's the code I am trying to use

<div ng-controller="progressController" >
  <input type="hidden" value="ABCD" ng-model="testingmodel.testing">
</div>

app.controller('progressController', function($scope) {
  console.log($scope.testingmodel.testing);
});

It says undefined when I console.log my variable in Controller.

why you're using angular 1? angular has changed from version 2. I'll suggest you to start using angular version 2+ — arpitansu
– arpitansu, Commented Jul 18, 2019 at 11:03
No, this is different. I don't have any events like submit or click. The actual value is coming from the server, which I will put in input type hidden part. — Anup Kumar Gupta
– Anup Kumar Gupta, Commented Jul 18, 2019 at 11:15
two-way data binding always ensures that whatever you write in your input box or whatever you set to your variable which is used for input will be same. That is what you want to do, you want to set whatever data you're getting from server to set in the input box. you don't need submit button for this. just read the accepted answer. — arpitansu
– arpitansu, Commented Jul 18, 2019 at 11:21

vrdrv · Accepted Answer · 2019-07-18 11:37:41Z

0

You're doing console.log(...) too early. At this time your controller doesn't have any information from the view.

The second problem is that you're binding the view to a variable in controller and not the other way around. Your $scope.testingmodel.testing is undefined and it will obviously the value in the view to undefined.

Solution

Use ng-init to initialize the model and the controller's hook $postLink to get the value after everything has been initialized.

Like this

<div ng-controller="progressController" >
    <input type="hidden" ng-model="testingmodel.testing" ng-init="testingmodel.testing = 'ABCD'">
</div>

app.controller('progressController', function($scope) {
    var $ctrl = this;

    $ctrl.$postLink = function() {
        console.log($scope.testingmodel.testing);
    };
});

Edit: extra tip

I don't recomment using $scope for storing data since it makes the migration to newer angular more difficult.

Use controller instead.

Something like this:

<div ng-controller="progressController as $ctrl" >
    <input type="hidden" ng-model="$ctrl.testingmodel.testing" ng-init="$ctrl.testingmodel.testing = 'ABCD'">
</div>

app.controller('progressController', function() {
    var $ctrl = this;

    $ctrl.$postLink = function() {
        console.log($ctrl.testingmodel.testing);
    };
});

answered Jul 18, 2019 at 11:37

vrdrv

3234 silver badges10 bronze badges

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

1 Comment

Anup Kumar Gupta Over a year ago

Thank you so much, I already knew that my controller is not getting the value at proper time but didn't know how to send the value from HTML.

Miri Gold · Accepted Answer · 2019-07-18 11:32:29Z

0

You should use the ng-change or $watch

<div ng-controller="progressController" >
  <input type="hidden" value="ABCD" ng-model="testingmodel.testing" ng-change="change()">
</div>
app.controller('progressController', function($scope) {
   $scope.change = function(){
       console.log($scope.testingmodel.testing);
   }

});

Or:

app.controller('progressController', function($scope) {
   $scope.$watch('testingmodel.testing', function(newValue, olValue){
       console.log(newValue);
   }

});

If you use ng-change, the function is only called if the user changes the value in UI. If you use $watch anyway, the function is called.

edited Jul 18, 2019 at 11:32

answered Jul 18, 2019 at 11:25

Miri Gold

3901 silver badge10 bronze badges

2 Comments

Anup Kumar Gupta Over a year ago

ng-change will need a user action to invoke right ? because I tried both of your code, ng-change is not running and second one is throwing same "undefined".

Miri Gold Over a year ago

For the first time it will always be Undefined. But note that the second time will be the value.

Mayank Vadiya · Accepted Answer · 2019-07-18 11:48:32Z

0

You can't use value attribute for set or get value of any control, angularJS use ngModel for set or get values.

Here You should try like this way

app.controller('progressController', function($scope) {
  //from here you can set value of your input
  $scope.setValue = function(){
      $scope.testingmodel = {}
      $scope.testingmodel.testing = 'ABCD';
  }

  //From here you can get you value 
  $scope.getValue = function(){
   console.log($scope.testingmodel.testing);
  }
});

if you want to bind from html side then you should try like below

<input type="text" ng-model="testingmodel.testing"> 
<input type="hidden" ng-model="testingmodel.testing">

edited Jul 18, 2019 at 11:48

answered Jul 18, 2019 at 11:33

Mayank Vadiya

1,4512 gold badges19 silver badges32 bronze badges

2 Comments

Anup Kumar Gupta Over a year ago

I cannot pass the value in the JS file, I have to do it from HTML side.

Anup Kumar Gupta Over a year ago

Thank you, but I have already marked the right answer in which I had to pass the value from HTML side, you have written "ABCD" in JS file.

Collectives™ on Stack Overflow

AngularJS - How to pass data from View (HTML) to Controller (JS)

3 Answers 3

Solution

Edit: extra tip

1 Comment

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Solution

Edit: extra tip

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related