Liaison bidirectionnelle d'un élément contenteditable dans ng-list

Je suis à la recherche de mise à jour Nom du Téléphone dans une liste de téléphones à l'aide de l'attribut contenteditable. J'ai essayé d'utiliser ng-changer, mais ce n'est pas de se faire licencier. Est il possible que je puisse faire cela?

J'ai une liste de Store.Phones

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

Alors maintenant, quand je modifier le nom du Téléphone j'ai besoin pour obtenir mis à jour dans la liste.

J'ai essayé quelque chose comme ceci avec le modèle pointant sur l'élément. Ce n'est pas de travail.

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

Aussi

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

mais dans ce cas, la méthode n'est pas de se faire licencier.

source d'informationauteur Phani

  1. 17

    Modifier

    Voici un exemple basé sur l'exemple de l'angle de docs qui utilise juste ng-repeat. Depuis ng-repeat crée un nouveau champ d'application pour chaque itération, il ne devrait pas être un problème.

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

    Il y a un exemple de comment vous pouvez le faire ici: http://docs.angularjs.org/guide/forms

    C'est en vertu de la "mise en Œuvre de contrôles de formulaire personnalisé (à l'aide de ngModel)" en-tête.

  2. 4

    juste enlever ctrl.$setViewValue(elm.html());

    lien vers http://jsfiddle.net/blingz/B5UbE/12/