Fill scope variable from hidden input value

Question

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?

what does data-ng-model="model.multiple" outputs?

Bhojendra Rauniyar
– Bhojendra Rauniyar

2015-02-10 13:26:52 +00:00
Commented Feb 10, 2015 at 13:26 — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Feb 10, 2015 at 13:26
Both newVal and oldValue are undefined

Miguel Moura
– Miguel Moura

2015-02-10 13:45:12 +00:00
Commented Feb 10, 2015 at 13:45 — Miguel Moura
– Miguel Moura, Commented Feb 10, 2015 at 13:45

Marcos Sandrini · Accepted Answer · 2015-02-10 15:49:40Z

1

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

answered Feb 10, 2015 at 15:49

Marcos Sandrini

4503 silver badges10 bronze badges

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

1 Comment

TrippRitter Over a year ago

Just ran into this situation. This solution is so simple I overlooked it.

Hazarapet Tunanyan · Accepted Answer · 2015-02-10 14:39:46Z

0

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

ng-init="model.multiple=true"

answered Feb 10, 2015 at 14:39

Hazarapet Tunanyan

2,85528 silver badges30 bronze badges

1 Comment

Marcos Sandrini Over a year ago

This use of ngInit is not recommended by Angular docs: docs.angularjs.org/api/ng/directive/ngInit

Michael Oryl · Accepted Answer · 2015-02-10 15:00:32Z

0

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

edited Feb 10, 2015 at 15:00

answered Feb 10, 2015 at 13:41

Michael Oryl

21.8k15 gold badges82 silver badges119 bronze badges

4 Comments

Miguel Moura Over a year ago

I tried that and both newVal and oldVal are undefined

Michael Oryl Over a year ago

@MiguelMoura I've updated the answer completely. It just appears that you can't impact the model through a hidden input, and I imagine that's not really what you want (or should) do.

Miguel Moura Over a year ago

I think I am going for window ... Basically I need to use, in my controller, a server side variable value ...

Michael Oryl Over a year ago

@MiguelMoura So you are saying that your http server is going to embed a value into the HTML views that it serves up as the Angular app? If that's the case, the <input type='hidden'> is not what you need. I would encourage you to accept an answer here (the answer is it is not possible) and then post a question that focuses on how to get a server side value into your application. There are a number of ways to do that that I believe would work much better for you. I'd be happy to work on such a question if you posted it.

Community · Accepted Answer · 2017-05-23 11:58:11Z

0

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

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Feb 14, 2015 at 17:52

etoisarobot

7,81417 gold badges57 silver badges84 bronze badges

Collectives™ on Stack Overflow

Fill scope variable from hidden input value

4 Answers 4

1 Comment

1 Comment

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related