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

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.

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

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);
    };
});

Solution 2

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.

Solution 3

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

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply