CODEWITHSUNDEEP
angularjs
Miguel Moura
Miguel Moura

Reputation: 39474

Fill scope variable from hidden input value

I have the following on an Angular controller:

application.controller('ImageController', function ImageController($scope, ImageService) {

  $scope.model = {
    images: [],
    multiple: false
  }

  $scope.$watch('model.multiple', function (newVal, oldVal) {
    console.log(newVal);
    console.log(oldVal);
  });

}

I need to get the $scope.model.multiple value from an hidden input.

The hidden input value is filled from server side. So for testing I have:

<input type="hidden" data-ng-model="model.multiple" data-ng-value="true" />

When I run my code both newVal and oldVal are false ... Why?

Upvotes: 1

Views: 2029

Answers (4)

etoisarobot
etoisarobot

Reputation: 7814

You can set the value as a global variable like 

<script>
   window.model = {multiple: true};
</script>

then in your controller add $window and set the value like this 

application.controller('ImageController', function ImageController($scope,  $window, ImageService) {

$scope.model = {
    images: [],
    multiple: $window.model.multiple
   }

as described here Angular js init ng-model from default values

Upvotes: 0

Marcos Sandrini
Marcos Sandrini

Reputation: 450

If you're populating the value of an input hidden server-side and wants it to become available in Angular, do it the whether in the Angular way, loading a JSON with the value or, if you don't have access to back-end or if you don't want to change your code a lot, render the template with an id like:

<input type='hidden' id='hiddenValue' value='xx(server-side)xx'>

And then inside the controller put something like:

$scope.value = document.getElementById('hiddenValue');

Upvotes: 1

Michael Oryl
Michael Oryl

Reputation: 21662

I don't think ngValue does what you think it does. It is meant for use with Options (in Selects) and for Radio Buttons. See docs here.

Short answer: The values in your $scope.$watch are false because you set $scope.model.multiple to false in the controller and a hidden input in a view doesn't get bound to the model as you hoped it would.

In your code I think you are trying to set model.multiple's value in your view for no reason, and in a way that is not possible.

It is my opinion that you should be setting the value to true in the controller. I don't see any reason why you would need it to be handled within a hidden input. You mention that it is coming "from the server", but the view is rendered by AngularJS - not some other server.

The purpose of the two-way binding on inputs is so that user edits will be reflected in your model. There doesn't appear to be any binding at all on hidden inputs since they are not user editable. Hidden inputs are meant for form submissions, and Angular doesn't do those. Forms serve a different purpose in Angular.

Check out this Plunk to see that hidden inputs don't impact the model. View:

<body ng-controller="MainCtrl">
  <input type="hidden" ng-model="model.multiple" ng-value="true" value="true" />
  <input type="hidden" ng-model="model.test" />Hidden inputs have no impact on the model.
  <br>That's why this is blank: '{{model.test}}'
</body>

Controller:

app.controller('MainCtrl', function($scope) {
  $scope.model = {
    images: [],
    multiple: false
  }

  $scope.$watch('model.multiple', function(newVal, oldVal) {
    console.log('New: ' + newVal);
    console.log('Old: ' + oldVal);
  });
});

Upvotes: 0

Hazarapet Tunanyan
Hazarapet Tunanyan

Reputation: 2865

Instead of ngValue directive,you can use ngInit directive.Here is how you can do that.

ng-init="model.multiple=true"

Upvotes: 0

Related Questions