2013-03-30 3 views
9

Ceci est un problème étrange. Le code est simple:Angular.JS: pourquoi les entrées ne peuvent-elles pas être éditées?

Code HTML:

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

Code angulaire:

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

L'URL de démonstration en direct est: http://plnkr.co/edit/2QFgRooeFUTgJOo223k9?p=preview

Je ne comprends pas pourquoi les contrôles d'entrée ne peut pas être édité, je ne peux pas taper de nouveaux caractères ou supprimer des caractères.

Répondre

9

Ceci est un problème courant dû à l'héritage de portée. Chacun de vos names est une primitive si ng-repeat fait propre point de portée de ce qui est pas connecté à l'original, si chaque names est un objet ng-repeat élément de portée sera une référence à l'objet d'origine

[{name:"aaa"},{name:"bbb"},{name:"ccc"}]; 

Utilisez toujours un dot dans ng-model est une règle de base utile

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

Working Plunker

Lire cet article sur Gith angulaire wiki ub pour explanaton détaillée:

https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-Prototypal-Inheritance

3

angulaire 'fixe' ce en 1.1 avec la piste par l'indice de $. Pas besoin de changer votre modèle.

<div ng-repeat="item in names track by $index"> 
    <input type="text" ng-model="names[$index]" /> 
</div> 

Plunker here

0

réponse tardive, mais vous devez aussi faire attention de fautes de frappe, que angulaire vous ne serez pas mettre en garde:

<div ng-repeat="item in names track by $index" ng=if="names[$index] = 'John'"> 
    <input type="text" ng-model="names[$index]" /> 
</div> 

Notez les égaux unique dans le cas ng, que ne provoquera pas d'avertissement ou d'erreur, mais le texte sera également en lecture seule. Assez difficile à repérer si vous lisez rapidement.

Il devrait bien sûr être:

<div ng-repeat="item in names track by $index" ng-if="names[$index] == 'John'"> 
    <input type="text" ng-model="names[$index]" /> 
</div> 
+0

votre correction manque la correction. =] – sonicblis

+0

@sonicblis bon spot, corrigé! – PeterS

Questions connexes