Angular ng-bind doesn't work in my <input type="text">

Question

In my angular app, I'm using ng-bind to display some static information on a modal. Here's the HTML:

<div class="row">
    <div class="col-sm-6">
        <div class="form-group">
            <label for="orgTelephone" lang-tag="ActivityReport.NewContact_Modal_Telephone" class="sr-only">Telephone</label>
            <input type="text" class="form-control" id="orgTelephone" ng-bind="contact.telephone" placeholder="Placeholder / Hint Texts">
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group">
            <label for="orgEmail" lang-tag="ActivityReport.NewContact_Modal_Email" class="sr-only">Email</label>
            <input type="text" class="form-control" id="orgEmail" ng-bind="contact.email" placeholder="Placeholder / Hint Texts">
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
        <label for="orgSuggestedFollowup" lang-tag="ActivityReport.NewContact_Modal_Followup" class="sr-only">Follow up</label>
        <textarea class="form-control" rows="5" id="orgSuggestedFollowup" ng-bind="contact.followup" placeholder=""></textarea>
    </div>
</div>

The thing is, ng-bind is indeed working correctly in my textarea, on the last .row, but it doesn't output anything in my previous input elements.

I don't want to use ng-model because I do not want two-way data binding in this modal. I need to be able to revert any changes if the user presses Cancel, which I can't if I use ng-model.

Is there a way to make one way data-binding work with inputs?

In this case you should have two different variables. One for input, and second one for other stuff. — Niezborala
– Niezborala, Commented Sep 28, 2015 at 14:05
You cannot use ng-bind like this. See documentation docs.angularjs.org/api/ng/input/input[text] Use ng-model instead — Shamal Perera
– Shamal Perera, Commented Sep 28, 2015 at 14:17

Derek · Accepted Answer · 2015-09-28 14:06:39Z

4

ng-bind is for the content of an HTML tag, not an attribute. Use double curly markup instead, like this :

<input type="text" class="form-control" id="orgTelephone" value="{{contact.telephone}}" placeholder="Placeholder / Hint Texts">

answered Sep 28, 2015 at 14:06

Derek

1,81618 silver badges26 bronze badges

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

1 Comment

Tiago Over a year ago

Such a simple fix, I was over-complicating things in my head. This did indeed solve my problem, thank you.

charlietfl · Accepted Answer · 2015-09-28 14:47:13Z

1

The way to work around reverting is to not update the live model and make a copy of the object to edit.

When user is ready to save simply extend the original with the copy.

$scope.item={foo:'bar'};
// make standalone copy that is not a reference to original
$scope.editItem = angular.copy($scope.item);

$scope.save = function(){
  // update server and then update local data using extend
  angular.extend($scope.item, $scope.editItem);
}

Then use ng-model pointed at the edititem and the original will remain untouched until you save changes

<input ng-model="editItem.foo">

edited Sep 28, 2015 at 14:47

answered Sep 28, 2015 at 14:35

charlietfl

172k14 gold badges125 silver badges154 bronze badges

4 Comments

Tiago Over a year ago

This may very well be the "most correct" answer when it comes to good practices. For now, editing works exactly as intended with just the simple fix suggested by @Derek, but I will probably implement the pattern you suggested whenever I come across a similar problem in the future. Thank you.

charlietfl Over a year ago

but how are you retrieving edited values? If it requires parsing the dom it's not nearly as clean as copying the original and using 2-way binding and not nearly as easy to test

Tiago Over a year ago

I generate a (hidden) modal for each item on my contacts list with ng-repeat, making use of $index to generate unique ids for each modal. Clicking edit opens up this modal, which loads up the contact at contacts[$index]. When I click Save, I use, e.g., $('#' + index + '-contact-name').val() to retrieve the values of each contact field. Hitting cancel just dismisses the modal. This has the interesting side effect of keeping what the user typed in edit mode even if the modal is dismissed and re-opened later. This is likely incredibly inefficient too.

charlietfl Over a year ago

yes... sounds like it could be greatly simplified and also shouldn't need jQuery at all for this. Keep in mind that ng-repeat creates child scopes so the editItem can be maintained only at child scope level or in indexed array in controller

Collectives™ on Stack Overflow

Angular ng-bind doesn't work in my <input type="text">

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related