Bug - Value of an input is not being kept

[zdam]

Hi,

I am trying to set the value of an input. eg:

<input type="text" ng-model="modelVar" value="This does not work" /> 

It appears that Angular is losing this value.

Fiddle:  http://jsfiddle.net/zdam/2jHPh/

Cheers, Adam.

[Misko Hevery]

That is because you specified the model. What would you expect to happend? Have the value be written to model? This may look like a good idea, but it means that the only way to test it is to have the view, as without the HTML it you don't know what the defaults are. This was actually the intent, to force you to put all of the defaults into the code.

-- Misko

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/jjjZp9Sw3uoJ.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

[zdam]

Yes I was hoping to have the value written to the model.

The intent was to leverage existing server-side templating infrastructure to build the page in its' initial state.

eg. I am using asp.net mvc as the server-side technology. (other server-side templating mechanisms (such as ruby/erb) are similar. 

<input type="text" value="<%=Model.FamilyName%>" ng-model="form.FamilyName" />

which will render out as:

<input type="text" ng-model="form.FamilyName" value="Webber" />

where the value was populated from the server-side model.  

Without this, I will need to send the server-side model to the client as json, and then bind it.  

This is a bunch of extra work to do when trying to incrementally add Angular to an existing app.

-- Misko

To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.

[Witold Szczerba]

This is very non-angular way of doing application, but (as usual) you
can let Angular work as you want. One of the solution would be to
create a very simple directive which would take 'value' (or its own
attribute) from DOM element and put it into model. The question is: do
you really really want it that way?

Here you go:
dialogApp.directive('copyToModel', function($parse) {
return function(scope, element, attrs) {
$parse(attrs.ngModel).assign(scope, attrs.value);
}
});

And your example updated:
http://jsfiddle.net/witoldsz/2jHPh/27/

Or like this, without value="...", less verbose:
http://jsfiddle.net/witoldsz/2jHPh/28/

Regards,
Witold Szczerba

>>> angular+u...@googlegroups.com.

>>> For more options, visit this group at
>>> http://groups.google.com/group/angular?hl=en.
>>
>>

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To view this discussion on the web visit

> https://groups.google.com/d/msg/angular/-/qd8yngXYom4J.

>
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to

> angular+u...@googlegroups.com.

[Misko Hevery]

you could also change the directive name to 'value', in which case you don't have to change any of your HTML.

[zdam]

Thanks guys, I took your directive and renamed it to value, and it sets the model correctly.

I do understand that this is not the pure Angular way, but I need to balance that with being pragmatic about leveraging code and infrastructure that already exists.

ie Imagine a http get to Users/adam , that returns a html page which is ready to edit that users' details, with the form fields filled out on the server as part of the server template rendering.

Using this directive now allows us to use Angular on the client without having to change how the server renders/returns that initial data.  

It's the kind of thing you need when you want to start 'sprinkling' in Angular.

Cheers, Adam

>>> angular+unsubscribe@googlegroups.com.

>>> For more options, visit this group at
>>> http://groups.google.com/group/angular?hl=en.
>>
>>
> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/angular/-/qd8yngXYom4J.
>
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to

> angular+unsubscribe@googlegroups.com.

> For more options, visit this group at
> http://groups.google.com/group/angular?hl=en.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.

To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.

[Rob Hicks]

Hi.

I realize this an old question but it's related to my question.

If I have a view that contains a number of numeric fields that I want to initialize to zero (so I can subsequently listen for changes on them). If they are not numbers, how would I do that the angular way?

I could adopt the directive approach and add value attributes to each input, which is pretty easy. Or, I could try to do it in a controller, which I tried. I could explicitly set the value for each input when the controller loads, which is pretty tedious and seems a waste. Or I could try to set the values by testing each element of the model. I tried this but failed because when the controller loads, the model corresponding the view is not loaded. I also tried setting up a listener that watches for changes in the model and changes any values that were not numbers to zeros, but that didn't work either. 

Here's my plunk. I would greatly appreciate being any help understanding this.

Rob

[Mark Waddle]

I recommend initializing all values in your controller and removing the watch. Where you initialize $scope.budget to an empty object ({}), specify all of the budget variables to 0 instead. For example:

$scope.budget = {

  monthlySalary: 0,

  interestDividends: 0,

  ...

};