CODEWITHSUNDEEP
angularjs
Ankita
Ankita

Reputation: 623

Binding in ng-repeat

I have a div which displays the text. And below it have a textarea which can edit the text of the div.On typing the text of textarea the div text changes.I don't want this to happen.The problem is both div and text area is in ng-reapeat.Otherwise I would have used different scope for both. 

<div ng-repeat="item in list">
    <div>
      {{item.text}} // this is the text that is changing when typing in text area
    </div>
    <div>

      <textarea rows="4" cols="50" class="form-control" ng-model="item.text" required>{{item.text}}
       </textarea>

    </div>
  </div>

Here is the link to my issue http://codepen.io/ankitappuria27/pen/pyVzaj

Upvotes: 0

Views: 104

Answers (2)

Fidel90
Fidel90

Reputation: 1838

If you don't want to change the text in your div, just use a one time binding like:

{{::item.text}}

Note: Any change you make inside your textarea will ofcourse still affect your models text value. The changes just won't be visible in your div.

Example:

http://codepen.io/anon/pen/VaxGOp

Documentation:

https://docs.angularjs.org/guide/expression#one-time-binding

Upvotes: 3

Ahmed Helmy
Ahmed Helmy

Reputation: 31

In your JS file you may add element in json for displaying header text just like below: 

  app.controller('ctrl', function($scope) {
  $scope.newitem = '';
  $scope.list = [
    {
      "order":1,
      "header":"Black", // header text
      "text":"Black"
    },
    {
      "order":2,
      "header":"Blue", // header text
      "text":"Blue"
    }
  ];

});

and your html for binding should be as below

    <div>
      {{item.header}}
    </div>
    <div>

      <textarea rows="4" cols="50" class="form-control" ng-model="item.text" required>{{item.text}}
       </textarea>

    </div>

Upvotes: 0

Related Questions