Modifier le contenu sur place Modifier

Lorsque vous utilisez ng-repeat quelle est la meilleure façon de modifier le contenu?

Dans ma situation idéale, l’anniversaire ajouté serait un lien hypertexte, lorsque celui-ci est affiché, il affichera un formulaire d’édition – tout comme le formulaire d’ajout actuel avec un bouton de mise à jour.

Aperçu en direct (Plunker)

HTML:

     Custom Plunker   document.write('');      
  • {{bday.name}} | {{bday.date}}

App.js:

 var app = angular.module('birthdayToDo', []); app.controller('main', function($scope){ // Start as not visible but when button is tapped it will show as true $scope.visible = false; // Create the array to hold the list of Birthdays $scope.bdays = []; // Create the function to push the data into the "bdays" array $scope.newBirthday = function(){ $scope.bdays.push({name:$scope.bdayname, date:$scope.bdaydate}); $scope.bdayname = ''; $scope.bdaydate = ''; }; }); 

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}}

  • 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:

     
    {{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é.