Binding default input field values with ng-model

Question

I'm currently writing an application in AngularJS, and I've stumbled across a problem while using ng-model with input fields.

In the case that a user does not enter any text in one input field, is there any way to bind a default value to the ng-model? A sample of the code is shown below:

<input class="formInput" placeholder="{{ testVar.hasName.name }}" type="text" id="nameUpdate" ng-model="upd.name">

The idea is a user will be updating data. The placeholder will show the existing data, in this case the name, and updating this field will bind to the model. However, if a user does not wish to update this particular field, how can I bind the existing value to the model? I've noticed giving the input a value="xyz" prevents the ng-model from working properly.

I should note defining this information in the controller as a default is not an acceptable solution, as the data within testVar will vary.

Thanks in advance for any help.

why do you show existing data as placeholder, and not just as value in the textbox ? — Gonzalo.-
– Gonzalo.-, Commented Mar 13, 2017 at 21:10

Alex · Accepted Answer · 2017-03-13 21:06:31Z

0

Not the best practice, but you can init a default value with the help of ng-init:

<input class="formInput"
       placeholder="{{testVar.hasName.name}}"
       type="text"
       id="nameUpdate"
       ng-init="upd.name='defaultTextHere'"
       ng-model="upd.name">

answered Mar 13, 2017 at 21:06

Alex

721 silver badge10 bronze badges

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

3 Comments

denverCoder9 Over a year ago

So this seems to be what I'm looking for, but is it possible to bind a variable to this? ng-init=" '{{testVar.hasName.name}}' " holds the string correctly, however just ng-init="{{testVar.hasName.name}}" does not send the value to my controller.

denverCoder9 Over a year ago

Gave it a try, printing upd.name in an alert gives undefined?

denverCoder9 Over a year ago

Still undefined :(

Collectives™ on Stack Overflow

Binding default input field values with ng-model

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related