Zwei-Wege-Bindung von contenteditable Artikel innerhalb ng-Liste

Ich bin auf der Suche nach Telefonnummer in einer Liste von Telefonen mit contenteditable Attribut zu aktualisieren. Ich habe versucht, ng-change zu verwenden, aber das wird nicht gefeuert. Kann ich das irgendwie machen?Zwei-Wege-Bindung von contenteditable Artikel innerhalb ng-Liste

Ich habe eine Liste von Store.Phones

<ul class="store"> 
    <li ng-repeat="Phone in Store.Phones"> 
    <strong contenteditable> {{Phone.Name}}</strong> 
    </li> 
<ul>

Also wenn ich jetzt Telefonnamen bearbeiten Ich muß es in der Liste aktualisiert.

Ich habe so etwas mit dem Modell versucht, das auf das Element zeigt. Das funktioniert nicht.

<strong ng-model='Store.Phones[$index].Name'> {{Phone.Name}}</strong>

Auch

<strong ng-model='PhoneName' ng-change='PhoneNameChanged()'> {{Phone.Name}}</strong>

aber in diesem Fall ist das Verfahren nicht gefeuert wird immer.

Quelle

2013-02-27 Phani

bearbeiten

Hier ist ein Beispiel am Beispiel der Winkel docs basiert die ng-repeat nur verwendet. Da ng-repeat einen neuen Bereich für jede Iteration erstellt, sollte dies kein Problem sein.

<!doctype html> 
<html ng-app="form-example2"> 
<head> 
    <script src="http://code.angularjs.org/1.0.5/angular.min.js"></script> 
    <script> 
    angular.module('form-example2', []).directive('contenteditable', function() { 
     return { 
      require: 'ngModel', 
      link: function(scope, elm, attrs, ctrl) { 
       // view -> model 
       elm.bind('blur', function() { 
        scope.$apply(function() { 
         ctrl.$setViewValue(elm.html()); 
        }); 
       }); 

       // model -> view 
       ctrl.$render = function() { 
        elm.html(ctrl.$viewValue); 
       }; 

       // load init value from DOM 
       ctrl.$setViewValue(elm.html()); 
      } 
     }; 
    }); 
    </script> 
</head> 
<body> 
    <div ng-repeat="i in [1, 2, 3]"> 
     <div contentEditable="true" ng-model="content" title="Click to edit">Some</div> 
     <pre>model = {{content}}</pre> 
    </div> 
    <style type="text/css"> 
    div[contentEditable] { 
     cursor: pointer; 
     background-color: #D0D0D0; 
    } 
    </style> 
</body> 
</html>

Original-

Es ist ein Beispiel dafür, wie Sie das hier gerade tun: http://docs.angularjs.org/guide/forms

Es ist unter dem "Implementierung eigener Formular-Steuerelemente (mit ngModel)" Header.

Quelle

2013-02-27 09:40:06

Ja, ich habe das gesehen, aber ich habe Probleme, wenn der Artikel, den ich bearbeite ich in einer Liste. – Phani

Ich habe ein Beispiel hinzugefügt, das ng-repeat verwendet. –

Danke Anders arbeitet hier drin. Lass mich das Ausprobieren. – Phani

entfernen Sie einfach ctrl.$setViewValue(elm.html());

Link zu http://jsfiddle.net/blingz/B5UbE/12/

Quelle

2013-05-27 09:41:38 Miro

Das funktionierte für mich - danke! – Kurtfm

Zwei-Wege-Bindung von contenteditable Artikel innerhalb ng-Liste

Antwort

Verwandte Themen