Angular.js inline-editing

Ich versuche, den besten Ansatz für inline-editing mit angularjs. In meinem Fall ist es eine Art Daten-grid mit einer Schaltfläche "Bearbeiten". So ist es innerhalb von ng-repeat.

Was ich gesehen habe Menschen tun, ist sowohl die tatsächlichen Daten und der Bearbeitung der Eingänge in der gleichen Zeile, mit der Bearbeitung von Eingaben versteckt und angezeigt klicken Sie auf die Schaltfläche "Bearbeiten".

Aber es scheint nicht richtig. Es ist eine Menge von nutzlos-DOM-meiner Meinung nach.

So, ich dachte, ich wäre besser, so etwas zu tun. Klicken Sie auf die Schaltfläche Bearbeiten, die ist gonna haben eine Richtlinie, die würde, 1) ausblenden der <td> mit Daten 2) finden Sie die Schaltflächen " Eltern, die sollten <tr>, und Spritzen Sie eine Vorlage mit in es 3) auf speichern, entfernen Sie diese Bearbeiten <td>s und zeigen Sie die Daten <td>s wieder.

Also begann ich, mit der Richtlinie, im inneren hatte ich element.click() - Funktion, die

//found the parent
var parent = element.closest('tr');
//found all the data tds
var tds = parent.find('td');
//hidden them  
tds.hide();

Nun hier ist das problem, weiter habe ich daran gedacht, so etwas wie dieses

//append input with editing tds into parent
parent.append('<td><input type="text" ng-model="entry.name" /> {{entry.name}} </td>');

Aber dann würde es nicht binden oder gar analysieren, die {{}} wäre es? Welche Methode muss ich verwenden, anstatt die jquery append?

Doku über Richtlinien, sagt dieser

template-element - Das element, wo die Richtlinie erklärt wurde.
Es ist sicher zu tun, template transformation auf das element und Kind
Elemente nur.

So kann ich nicht verwenden, Vorlage transoformation auf das element.parent()

Würde es helfen, wenn ich die Richtlinie auf die <tr> und selbst wenn ich es täte, würde ich dann Verwandle meine ganze <tr>, was bedeutet, dass ich verloren die original-Vorlage und ich müsste eine andere Richtlinie oder etwas, was sich verändern würde, es wieder in den ursprünglichen Zustand.. würde ich nicht?

Bearbeiten

Da diese Fragen scheint ziemlich beliebt.. Erstens meine ursprüngliche Sorge der Erbringung zusätzliches element mit jedem ng-repeat iteration ist unbegründet, weil 1) Sie können mit ng-if, was bedeutet, es ist nicht gonna gerendert werden, bis die Bedingung wahr ist 2) man könnte anfügen eine Vorlage, wie ich wollte, dann verwenden Sie einfach $compile und es wird gut funktionieren, es ist definitiv nicht gonna be "teuer", denn Sie tun es nur für das eine element. Es gibt viele Möglichkeiten, dies zu nähern, aber ng-wenn ist die einfachste, wenn supermasher die Art und Weise nicht passt, ist, dass.

InformationsquelleAutor fxck | 2013-04-03

11

Injektion einer frisch-Vorlage ist eine sehr teure Art und Weise, Dinge zu tun, vor allem, wenn Sie viel auf Instanzen der inline-editor.

Gibt es viele Möglichkeiten, es zu tun, aber die sauberste (und einfachste) ist die Verwendung des gleichen Elements zu Bearbeiten und zeigen Sie Ihre Daten, und einfach Umschalten, es ist CSS durch eine Richtlinie zu ändern, wie es scheint, in beiden Staaten, etwa so:
```
myApp.directive('inlineEdit', function () {

return function (scope, element, attrs) {
    element.bind('click', function () {

        if (element.hasClass('inactive')) {
            element.removeClass('inactive');
        } else {
            element.addClass('inactive');
            $(element).blur()
        }
    });
};
```
});

Überprüfen Sie heraus diese Geige für ein voll funktionsfähiges Beispiel: http://jsfiddle.net/3EaY8/.
- ..mit deaktivieren meinte ich, macht es so Aussehen wie es ist nicht ein input mit css
- In Bezug auf die CSS-browser-Unterstützung, ich sehe nicht, dass Sie nennenswerte Probleme mit diesem Ansatz. In Bezug auf deine plugins, wie es scheint, ein weiterer Grund, dass Sie würde nicht wollen, ändern Sie den DOM jedes mal, wie Sie sicherlich haben, um binden Sie Ihre plugins als auch.
- Ja, aber a) müsste ich alle meine plugins nicht "akzeptieren" klickt, wenn die Klasse ist inaktiv, b) plugins wie select2 eigentlich ausblenden der ursprünglichen Eingabe, und fügen Sie eigene divs, so dass es nicht leicht werden würde.
- Die herausragende problem ist tatsächlich konzentriert sich rund um Themen, die nicht anders in Ihrer ursprünglichen Frage. Ich würde vorschlagen, dass Sie akzeptieren meine Antwort, wie es ist, eine gute Lösung zu deiner ursprünglichen Frage und kann nützlich sein, um jemand anderes, und dann eine neue Frage, einschließlich Ihrer zusätzlichen plugin-Anforderungen. Idealerweise sollten Sie auch eine Fiedel, wenn möglich, erhöhen Sie Ihre Chancen auf eine Antwort.
- Ich habe mehrere von diesen auf SO und dies ist mein Favorit. Danke!
- Sehr gut. Aber mehr Sinn machen für mich wie folgt aus: jsfiddle.net/2mh4m
InformationsquelleAutor supermasher
2

Hi da ich weiß, dass es eine akzeptierte Antwort schon, aber ich habe stolpern das

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

vor kurzem, und ich glaube, es ist ein sehr anständiges Projekt, das sich mit editierbaren Steuerelementen im Allgemeinen.

Hoffe, es hilft einigen ein.

InformationsquelleAutor Byron
0

Nur werfen Sie diese raus, wenn Sie die neue ng-if Richtlinie zu "verstecken" diejenigen, Bearbeiten Eingaben und Sachen, die "eine Menge von nutzlos-DOM" ist nicht so sehr ein problem mehr, da die ng-wenn nicht render den html-Code auf alle.

InformationsquelleAutor fxck

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.