Vous devez mettre le formulaire dans chaque nœud et utiliser ng-show et ng-hide pour activer et désactiver l’édition, respectivement. Quelque chose comme ça:

 
 {{bday.name}} | {{bday.date}} 
 Name:  Date:  
 Save 
  

Les points clés ici sont:

• J’ai changé les contrôles ng-model à la scope locale
• Ajout de ng-show pour que nous puissions le montrer lors de l’édition
• Ajout d’un span avec un ng-hide pour masquer le contenu lors de l’édition
• Ajout d’un ng-click , qui pourrait se trouver dans n’importe quel autre élément, qui permute l’ editing sur true
• Modification de ng-submit pour basculer l’ editing sur false

Voici votre mise à jour de Plunker .

Je cherchais une solution de assembly en ligne et j’ai trouvé un plunker qui semblait prometteur, mais cela n’a pas marché pour moi. Après quelques retouches avec le code, je l’ai fait fonctionner. Bravo à la personne qui a fait l’effort initial de coder cette pièce.

L’exemple est disponible ici http://plnkr.co/edit/EsW7mV?p=preview

Voici le code:

 app.controller('MainCtrl', function($scope) { $scope.updateTodo = function(indx) { console.log(indx); }; $scope.cancelEdit = function(value) { console.log('Canceled editing', value); }; $scope.todos = [ {id:123, title: 'Lord of the things'}, {id:321, title: 'Hoovering heights'}, {id:231, title: 'Watership brown'} ]; }); // On esc event app.directive('onEsc', function() { return function(scope, elm, attr) { elm.bind('keydown', function(e) { if (e.keyCode === 27) { scope.$apply(attr.onEsc); } }); }; }); // On enter event app.directive('onEnter', function() { return function(scope, elm, attr) { elm.bind('keypress', function(e) { if (e.keyCode === 13) { scope.$apply(attr.onEnter); } }); }; }); // Inline edit directive app.directive('inlineEdit', function($timeout) { return { scope: { model: '=inlineEdit', handleSave: '&onSave', handleCancel: '&onCancel' }, link: function(scope, elm, attr) { var previousValue; scope.edit = function() { scope.editMode = true; previousValue = scope.model; $timeout(function() { elm.find('input')[0].focus(); }, 0, false); }; scope.save = function() { scope.editMode = false; scope.handleSave({value: scope.model}); }; scope.cancel = function() { scope.editMode = false; scope.model = previousValue; scope.handleCancel({value: scope.model}); }; }, templateUrl: 'inline-edit.html' }; }); 

Modèle de directive:

 
  cancel save  {{model}} edit   

Pour l’utiliser, ajoutez de l’eau:

METTRE À JOUR:

Une autre option consiste à utiliser le readymade Xeditable pour AngularJS:

http://vitalets.github.io/angular-xeditable/

J’ai modifié votre plunker pour qu’il fonctionne via angular-xeditable :

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

C’est une solution courante pour la modification en ligne: vous créez des hyperliens avec une directive editable-text qui bascule dans la :

  {{bday.name || 'empty'}}  

Pour la date j’ai utilisé la directive editable-date qui bascule dans html5 .

Comme il s’agit d’une fonctionnalité courante, il est conseillé d’écrire une directive pour cela. En fait, quelqu’un l’a déjà fait et l’a ouvert. J’ai utilisé la bibliothèque editablespan dans un de mes projets et cela fonctionnait parfaitement, fortement recommandé.