Freewind Freewind - 7 months ago 31
AngularJS Question

Angular.JS: why can't the inputs be edited?

This is a strange problem. The code is simple:

HTML code:

<body ng-controller="MainCtrl">
<ul ng-repeat="name in names">
<input type="text" ng-model="name" />

Angular code:

app.controller('MainCtrl', function($scope) {
$scope.names = ["aaa","bbb","ccc"];

The live demo url is:

I do not understand why the input controls can not be edited, I can't type new characters or delete characters.


This is a common issue due to scope inheritance . Each of your names is a primitive so ng-repeat makes it's own scope item that is not connected to original, however if each names is an object ng-repeat scope item will be a reference to original object


Always use a dot in ng-model is a helpful rule of thumb

<div ng-repeat="item in names">
      <input type="text" ng-model=""/>

Working Plunker

Read this article on angular github wiki for detailed explanaton: