CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-ng-repeat
allenhwkim
allenhwkim

Reputation: 27738

angularjs ng-repeat and ng-model does not go well with textarea/input tag

When I generate input tags with ng-repeat and assign ng-model within custom directive it invokes directive on every key stroke.

This is Demo

http://plnkr.co/edit/Oku8EH?p=preview

var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {
  $scope.arr = ["1234567"];
});

app.directive('myDirective', function($compile, $timeout) {
  var num=0;
  return {
    link: function(scope, el, attrs) {
      console.log('this happens with every keyup event in textarea when ng-model is given as arr[$index], why?');
    }
  };
});


<body ng-app="myApp" ng-controller="MyCtrl">
  arr[0] : {{arr[0]}} <br/>
  <input my-directive ng-repeat="str in arr" ng-model="arr[$index]" />
  </input>
</body>

It's strange.

Upvotes: 0

Views: 764

Answers (1)

ThomasC
ThomasC

Reputation: 8165

It's because the ng-repeat is reevaluating each time you change the arr Array as it must be watching it (see line l256 here in ngRepeat sources on Github)

If you point the model on another array, everything is OK.

You can check it out with this Plunkr.

Upvotes: 1

Related Questions