1

データのテーブルでインライン編集を行おうとしています ( plunkrを参照)

<table class="table table-bordered">
<tr ng-repeat="data in dataset" >
  <td ng-repeat="(key, value) in data"  >

    <div class="key-block">
           <strong >{{key}}</strong>
        </div>
        <div class="val-block" inline-edit="data[key]" on-save="updateTodo(value)" on-cancel="cancelEdit(value)">
        <input type="text" on-enter="save()" on-esc="cancel()" ng-model="model" ng-show="editMode">
        <button ng-click="cancel()" ng-show="editMode">cancel</button>
        <button ng-click="save()" ng-show="editMode">save</button>

        <span ng-mouseenter="showEdit = true" ng-mouseleave="showEdit = false">
            <span ng-hide="editMode" ng-click="edit()">{{model}}</span>
            <a ng-show="showEdit" ng-click="edit()">edit</a>
        </span>
    </div>
  </td>
</tr>

多くの場所で、スコープの問題を回避するためにin.を使用する必要があることがわかります。私はモデルのようにやっています。一文字入力しただけで入力欄がぼやけます。ng-modelng-repeatdont know the key alreadydata[key]

4

1 に答える 1

1

あなたが説明した動作は正常です。よく見ると、入力値とディレクティブの両方が同じオブジェクトにバインドされていることがわかりますdata[key]。テキスト入力の値を変更するmodelと更新され、最終的にディレクティブの更新がトリガーされ、「リスト」ビューに戻ります。

これを修正する簡単な解決策の 1 つは、ディレクティブと入力値の間に中間変数を使用し、保存ボタンがクリックされたときにのみモデルを更新することです。そんな感じ ：

  //Directive
  scope.newValue = null;

  scope.edit = function() {
    scope.editMode = true;
    scope.newValue = scope.model;

    $timeout(function() {
      elm.find('input')[0].focus();
    }, 0, false);
  };

  //Template
  <input type="text" on-enter="save()" on-esc="cancel()" ng-model="newValue" ng-show="editMode">

ここで変更されたプランカーを見ることができます。

于 2013-11-05T08:05:35.240 に答える