ng-list内のcontenteditable itemの双方向バインド

contenteditable属性を使用して電話機のリストで電話名を更新したいと考えています。私はng-changeを使用しようとしましたが、解雇されません。私はこれを行うことができる方法はありますか？ng-list内のcontenteditable itemの双方向バインド

私は電話での名前を編集するときだから今、私はそれがリスト内で更新取得する必要がありStore.Phones

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

のリストを持っています。

私は要素を指すモデルでこれを試しました。これは動作していません。

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

また

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

が、この場合には方法は、解雇されていません。

出典

2013-02-27 Phani

編集

ここだけng-repeatを使用して角度のドキュメントに例をもとに例を示します。 ng-repeatは反復ごとに新しいスコープを作成するので、問題ではありません。

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

オリジナル

あなただけではここで行うことができる方法の例があります：http://docs.angularjs.org/guide/forms

それは「（ngModelを使用して）カスタムフォームコントロールの実装」ヘッダーの下です。

出典

2013-02-27 09:40:06

にctrl.$setViewValue(elm.html());

リンクを削除します。 – Phani

ng-repeatを使用した例を追加しました。 –

Anders氏がここで働いてくれてありがとう。私はそれをチェックさせてください。 – Phani

ちょうどはい、私はそれを見てきましたが、私が編集していた項目がリスト内にあるとき、私は問題を抱えていますhttp://jsfiddle.net/blingz/B5UbE/12/

出典

2013-05-27 09:41:38 Miro

これは私のために働いた - ありがとう！ – Kurtfm

ng-list内のcontenteditable itemの双方向バインド

答えて

関連する問題