Modifier En Place D'Édition De Contenu

Lors de l'utilisation de ng-repeat quelle est la meilleure façon d'être en mesure de modifier le contenu?

Dans ma situation idéale de l' ajouté anniversaire serait un lien hypertexte, lorsque cela est exploité, il affichera un formulaire d'édition - juste le même que l'actuel ajouter un formulaire avec un bouton de mise à jour.

L'Aperçu En Direct (Plunker)

HTML:

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script>
      document.write('<base href="' + document.location + '" />');
    </script>
    <script src="app.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/css/bootstrap-combined.min.css"
    rel="stylesheet">
  </head>
<body ng-app="birthdayToDo" ng-controller="main">
    <div id="wrap">

      <!-- Begin page content -->
      <div class="container">
        <div class="page-header">
          <h1>Birthday Reminders</h1>
        </div>
            <ul ng-repeat="bday in bdays">
                <li>{{bday.name}} | {{bday.date}}</li>
            </ul>

           <form ng-show="visible" ng-submit="newBirthday()">
            <label>Name:</label>
            <input type="text" ng-model="bdayname" placeholder="Name" ng-required/>
            <label>Date:</label>
            <input type="date" ng-model="bdaydate" placeholder="Date" ng-required/>
            <br/>
            <button class="btn" type="submit">Save</button>
        </form>
      </div>

      <div id="push"></div>
    </div>

    <div id="footer">
      <div class="container">
        <a class="btn" ng-click="visible = true"><i class="icon-plus"></i>Add</a>
      </div>
    </div>
    </body>

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 = '';

    };
});

Est-ce que votre question reportez-vous à la mise en œuvre effective ou de la conception de l'interface?
Il était censé être la mise en œuvre de la conception de l'interface est facile
Je suis arrivé ici à la recherche de ce que vous voulez, mais avez-vous remarqué que vous êtes à la répétition de l'élément ul au lieu de la batterie au lithium? Le résultat est que vous avez autant de ul's comme des éléments, ce qui n'est pas correct.

InformationsquelleAutor Jess McKenzie | 2013-03-16

70

Vous devriez mettre la forme à l'intérieur de chaque nœud et l'utilisation ng-show et ng-hide pour activer et désactiver la modification, respectivement. Quelque chose comme ceci:
```
<li>
  <span ng-hide="editing" ng-click="editing = true">{{bday.name}} | {{bday.date}}</span>
  <form ng-show="editing" ng-submit="editing = false">
    <label>Name:</label>
    <input type="text" ng-model="bday.name" placeholder="Name" ng-required/>
    <label>Date:</label>
    <input type="date" ng-model="bday.date" placeholder="Date" ng-required/>
    <br/>
    <button class="btn" type="submit">Save</button>
   </form>
 </li>
```
Les points clés sont ici:
- J'ai changé les contrôles ng-model à la portée locale
- Ajouté ng-show à form donc on peut le montrer lors de l'édition
- Ajouté un span avec un ng-hide afin de masquer le contenu lors de l'édition
- Ajouté un ng-click, qui pourrait être dans n'importe quel autre élément, qui permet de editing à true
- Changé ng-submit à bascule editing à false
Ici est votre mise à jour Plunker.
- Merci pour votre excellente réponse 🙂 j'ai un problème et il semble que quand j'ai modifier il affiche le formulaire d'ajout d'un trop - parce que sa de vrai
- Si j'étais à votre question, il suffit de définir $scope.visible = false sur newBirthday(). Cela rendra le formulaire d'Ajout à disparaître lorsque vous ajoutez un élément.
- Afin de limiter le traitement, je voudrais mettre cela dans une directive, de sorte que la manipulation du DOM et de compilation n'a pas lieu, sauf si c'est nécessaire.
- Puis-je avoir une explication/exemple?
- Mon point est que la plupart des entrées ne doivent pas être modifiés, et nous sommes encore en ajoutant de traitement sur l'ensemble de leur ajouter de la capacité. ngShow et ngHide n'arrête pas de fonctionnalité - ils juste ajouter display: none à la CSS. Si toutes les liaisons sont encore câblé et le DOM est toujours manipulé. Si nous avons fait ceci comme une directive, que l'on peut appeler la forme de la création à la demande. Voici une simple modification de la directive j'ai créé un tout à l'arrière pour illustrer: jsfiddle.net/joshdmiller/NDFHg. Et plus compliqué: plnkr.co/modifier/LVUIQD.
- Vous pouvez également utiliser ui-si pour l'élément de contrôle de la compilation et de la destruction. Il fonctionne un peu comme ng-show/ng-hide, à l'exception de supprimer l'élément du DOM et de la détruire au lieu de 'affichage-noning' il.
- Merci, cela a été très utile!
- Depuis instable Angulaire 1.1.5, Angulaire prend désormais en charge ngIf la sortie de la boîte. Comme pour renforcer cette 1.1.5 est un unstable.
- Comment aurais-je pousser ces modifications à mon service web? J'ai essayé un appel à mon contrôleur sur le bouton cliquez sur et sur le formulaire de soumission mais ni transmettre les données de formulaire en tant que paramètre. Dois-je en regardant ma collection de bdays pour les changements plutôt que de manipuler les soumettre?
- merci pour cet homme, ne savait Angularjs pouvez le faire aussi 😀 n'a pas besoin d'une autre INTERFACE des plugins 😀
- J'ai obtenu ce travail, et les modifications sont apportées "localement", mais comment puis-je faire de ces modifications sur le serveur? Je suis en utilisant ce avec AngularFire et j'ai un 3-way de la liaison de données.
- Ma perf question m'a amené ici. Pour ceux qui ont potentiellement grande liste d'éléments(700 dans mon cas), vous voudrez peut-être éviter cette approche. Sinon vous aurez en "erreur de script" de l'émission. Doit avoir la pensée d'échange dans la première place!
- Oh que oui! Pour sûr. Si vous avez trop d'éléments dans votre liste, il vaut mieux aller une approche différente, peut-être même créer une directive qui est capable d'agir exactement quand et sur quoi vous avez besoin. De toute façon, essayez de réduire la non-lier, une fois lorsque vous savez qu'il y aura trop d'éléments.
InformationsquelleAutor Caio Cunha

Je cherchais une édition en ligne de la solution et j'ai trouvé un plunker qui semblait prometteur, mais il ne fonctionne pas pour moi hors de la boîte. Après quelques retouches avec le code que j'ai eu de travail. Bravo à la personne qui a fait l'effort initial pour le code de 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'
};
});

Directive modèle:

<div>
<input type="text" on-enter="save()" on-esc="cancel()" ng-model="model" ng-show="editMode">
<button ng-click="cancel()" ng-show="editMode">cancel</button>
<button ng-click="save()" ng-show="editMode">save</button>
<span ng-mouseenter="showEdit = true" ng-mouseleave="showEdit = false">
<span ng-hide="editMode" ng-click="edit()">{{model}}</span>
<a ng-show="showEdit" ng-click="edit()">edit</a>
</span>
</div>

L'utiliser simplement ajouter de l'eau:

<div ng-repeat="todo in todos" 
inline-edit="todo.title" 
on-save="updateTodo($index)" 
on-cancel="cancelEdit(todo.title)"></div>

Mise à JOUR:

Une autre option est d'utiliser le readymade Xeditable pour AngularJS:

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

InformationsquelleAutor John P

7

J'ai modifié votre plunker pour le faire fonctionner via angulaires-xeditable:

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

C'est une solution commune pour la modification en ligne - vous creale de liens hypertextes avec des editable-text directive
qui permet de basculer dans <input type="text"> tag:
```
<a href="#" editable-text="bday.name" ng-click="myform.$show()" e-placeholder="Name">
{{bday.name || 'empty'}}
</a>
```
Pour la date j'ai utilisé editable-date directive qui permet de basculer en html5 <input type="date">.

InformationsquelleAutor vitalets
4

Puisque c'est une pièce commune de fonctionnalité, il est une bonne idée de rédiger une directive ce. En fait, quelqu'un l'a déjà fait et open source il. J'ai utilisé editablespan bibliothèque dans un de mes projets et il a parfaitement fonctionné, fortement recommandé.

InformationsquelleAutor Michał Kwiatkowski

Vous devez vous connecter pour publier un commentaire.