Input value not showing up (AngularJS)

Question

I've got this controller:

app.controller('controlFormulario', function($scope) {
  this.formulario = [];
  this.formulario.fecha = new Date();
});

...this directive:

app.directive('formulario', [function() {
  return {
    restrict: 'E', // C: class, E: element, M: comments, A: attributes
    templateUrl: 'modules/formulario.html'

  };

... and this view:

<div class="form-group">
  <label for="fecha">Fecha</label>
  <input type="fecha" class="form-control" id="fecha" ng-model="fecha" value="{{formCtrl.formulario.fecha | date}}"  disabled>
</div>

As you may guess, the attribute value has the date, perfectly filtered and so. No problem here. The actual problem comes when you see the website, and find out that the input doesn't show up anything. The "value" attribute is perfectly assigned, but it's not showing it inside the input box.

Why? Am I doing something wrong? Tried the same with ng-init, ng-value... I'm a newbye on AngularJS, just ended the basic tutorial and I'm trying to practise and get some more knowledge, so maybe I'm missing out something.

Any help?

Frankly, I began seeing the $scope thingy when I ended the tutorial, in the actual uses of Angular. I've got no idea on what it's used for, since Google didn't do any mention to it in the basic tutorial... I think it's not a need though, since the logic of the problem works: the value is saved in, it just doesn't appear, like if it's an HTML5 problem or something. — Zerok
– Zerok, Commented Jul 30, 2015 at 10:53

cbeeson · Accepted Answer · 2015-07-30 10:54:01Z

1

You need to store the data attribute to the $scope.

Check out this link: https://docs.angularjs.org/guide/scope

answered Jul 30, 2015 at 10:54

cbeeson

763 bronze badges

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

2 Comments

Zerok Over a year ago

Why must I use $scope? I still don't understand why, since the data logic works fine defining the controller in the form as <form ng-controller="controlFormulario as formCtrl">... is it any good to use?

Zerok Over a year ago

It worked, but I still find this pretty clunky. What's the difference between setting the controller form object (this.formulario) and setting the $scope? If I use an expression that accesses to this object's variable (this.formulario.fecha), it appears in the DOM, but not on the visible page, while if I set it as a ng-model with the same name than the scope, it appears perfectly. Why does this happen?

Razvan B. · Accepted Answer · 2015-07-30 11:33:55Z

As a best practice, you shouldn't use $scope, instead, like you did, you should use controllerAs, so, in your controller:

var cf = this;

and then, instead of using

this.formulario = []; 
this.formulario.fecha = new Date();

you should have

cf.formulario = [];
cf.fetcha = new Date();

then, in your html, you would have

ng-controller="controlFormulario as cf"

Then, the input model becomes: cf.fetcha and all other scopes from the controller should now be prefixed with cf.

<input type="fecha" class="form-control" id="fecha" ng-model="cf.fecha" value="{{formCtrl.formulario.fecha | date}}"  disabled>

Here is a good Article that better explains this

Collectives™ on Stack Overflow

Input value not showing up (AngularJS)

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related