Binding inputs to an array of primitives using ngRepeat => uneditable inputs

by

Can anyone explain to me why are the inputs uneditable/readonly? If it’s by design, what’s the rationale behind?

It is by design, as of Angular 1.0.3. Artem has a very good explanation of how 1.0.3+ works when you “bind to each ng-repeat item directly” – i.e., 

<div ng-repeat="num in myNumbers">
  <input type="text" ng-model="num">

When your page initially renders, here’s a picture of your scopes (I removed one of the array elements, so the picture would have fewer boxes):

enter image description here
(click to enlarge)

Dashed lines show prototypical scope inheritance.
Gray lines show child → parent relationships (i.e., what $parent references).
Brown lines show $$nextSibling.
Gray boxes are primitive values.
Blue boxes are arrays. Purple are objects.

Note that the SO answer of mine that you referenced in a comment was written before 1.0.3 came out. Before 1.0.3, the num values in the ngRepeat child scopes would actually change when you typed into the text boxes. (These values would not be visible in the parent scope.) Since 1.0.3, ngRepeat now replaces the ngRepeat scope num values with the (unchanged) values from the parent/MainCtrl scope’s myNumbers array during a digest cycle. This essentially makes the inputs uneditable.

The fix is to use an array of objects in your MainCtrl:

$scope.myNumbers = [ {value: 10}, {value: 20} ];

and then bind to the value property of the object in the ngRepeat:

<div ng-repeat="num in myNumbers">
  <input type="text" ng-model="num.value">
  <div>current scope: {{num.value}}</div>

More Related Contents:

  1. Directive isolate scope with ng-repeat scope in AngularJS
  2. AngularJS: ng-repeat list is not updated when a model element is spliced from the model array
  3. AngularJS : ng-repeat filter when value is greater than
  4. AngularJS – Filter empty objects
  5. What is the difference between ‘@’ and ‘=’ in directive scope in AngularJS?
  6. How to iterate over the keys and values with ng-repeat in AngularJS?
  7. If you are not using a .(dot) in your AngularJS models you are doing it wrong?
  8. How do I access the $scope variable in browser’s console using AngularJS?
  9. AngularJS For Loop with Numbers & Ranges
  10. Angular ng-repeat conditional wrap items in element (group items in ng-repeat)
  11. ng-repeat filtering data by date range
  12. Rendering directives within $sce.trustAsHtml
  13. Get value when selected ng-option changes
  14. Ng-click doesn’t work inside ng-repeat
  15. angularJS: How to call child scope function in parent scope
  16. When not to use ‘track by $index’ in an AngularJS ng-repeat?
  17. AngularJS Group By Directive without External Dependencies
  18. Angular orderBy number sorting as text in ng-repeat
  19. Dynamic form name attribute in Angularjs
  20. How to use “ng-repeat” within template of a directive in Angular JS?
  21. Angular scope function executed multiple times
  22. Why is using if(!$scope.$$phase) $scope.$apply() an anti-pattern?
  23. How to trigger a method when Angular is done adding scope updates to the DOM?
  24. Model in a modal window in angularjs is empty
  25. AngularJS controller inheritance
  26. Filtering an Angular 1.2 ng-repeat with “track by” by a boolean property
  27. How to highlight a selected row in ngRepeat?
  28. ng-repeat specify a starting index
  29. Access Parent Scope in Transcluded Directive
  30. Angular ng-click event delegation

Leave a Comment