Angular 2-way binding not working but expression does

Question

I have the following:

<div class="row" ng-repeat="item in repo.items">
  <div class="col-md-6 segment">
    <div class="display-text animation editable">
      <pre><span class="contenteditable" 
          tabindex="0"
          contenteditable="true"
          ng-model="item.text"></span></pre>
    </div>
  </div>
</div>

The 2-way binding isn't working for ng-model="item.text", but if I use the expression {{item.text}} within the same iteration it works as it should.

Any specific reason I'm missing which is causing this behavior?

ng-model is only used for input tags and not span!! use {{item.text}} — azerafati
– azerafati, Commented Feb 24, 2016 at 7:27

Shaishab Roy · Accepted Answer · 2016-02-24 07:31:36Z

2

ng-model used for input tag when you want to use only for view you should use ng-bind.

So you should use ng-bind="item.text" or {{item.text}} instead of ng-model="item.text" in span tag.

<pre>
     <span class="contenteditable" 
          tabindex="0"
          contenteditable="true"
          ng-bind="item.text"></span>
</pre>

or

<pre>
     <span class="contenteditable" 
           tabindex="0"
           contenteditable="true">{{item.text}}</span>
</pre>

edited Feb 24, 2016 at 7:31

answered Feb 24, 2016 at 7:19

Shaishab Roy

16.9k7 gold badges56 silver badges69 bronze badges

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

Collectives™ on Stack Overflow

Angular 2-way binding not working but expression does

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related