Binding a due vie di item contenteditable all'interno di ng-list

Sto cercando di aggiornare il nome del telefono in un elenco di telefoni che utilizzano un attributo contenteditable. Ho provato a usare ng-change ma questo non è stato licenziato. C'è un modo per farlo?Binding a due vie di item contenteditable all'interno di ng-list

Ho un elenco di Store.Phones

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

Così ora quando posso modificare il nome del telefono ho bisogno di ottenere l'aggiornamento della lista.

Ho provato qualcosa del genere con il modello che punta all'elemento. Questo non funziona.

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

anche

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

ma in questo caso il metodo non è essere stato licenziato.

fonte

2013-02-27 Phani

Modifica

Ecco un esempio basato sull'esempio nella documentazione angolari che utilizza solo ng-repeat. Poiché ng-repeat crea un nuovo ambito per ogni iterazione, non dovrebbe essere un problema.

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

originale

C'è un esempio di come si può fare proprio questo qui: http://docs.angularjs.org/guide/forms

è sotto il "Attuare controlli di modulo personalizzato (utilizzando ngModel)" intestazione.

fonte

2013-02-27 09:40:06

Sì ho visto che, ma sto avendo problemi quando la voce che sono l'editing è all'interno di una lista. – Phani

Ho aggiunto un esempio che utilizza ng-repeat. –

Grazie ad Anders che lavora qui. Fammi controllare. – Phani

sufficiente rimuovere ctrl.$setViewValue(elm.html());

link per http://jsfiddle.net/blingz/B5UbE/12/

fonte

2013-05-27 09:41:38 Miro

Questo ha funzionato per me - grazie! – Kurtfm

Binding a due vie di item contenteditable all'interno di ng-list

risposta

Problemi correlati