monstro monstro - 10 months ago 59
AngularJS Question

AngularJS - object property binds fine to one element and doesnt want to bind to another

not sure why but the property binds just fine to textarea and doesnt want to bind to a text box...

Here is HTML:

<form method="post" ng-submit="vm.executeAction('CompleteWorkOrder')">
<div class="form-group">
<label for="resolutionNote">@("Resolution Note".T())</label>
<textarea name="resolution" class="form-control" rows="4" placeholder="Provide resolution..." ng-bind="vm.woComplete.Resolution" required></textarea>
<div class="form-group">
<label for="completionDate">@("Completion Date".T())</label>
<input type="text" name="completionDate" class="form-control" ng-bind="vm.woComplete.Resolution" required>
<label>@("MRT".T()) {{}}</label>
<button type="submit" class="btn btn-success pull-right">Submit</button>

and the result

enter image description here

Does anyone know why this is happening? Thanks.

Answer Source

The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.

In your screenshot you can see that the text you entered in the text area DOES appear between the <input> and </input> tags. But, while that's fine for a textarea, that's not how an input works. An input stores it's data in the value attribute. You would want to use ng-model to get what you want.