0

チェックボックスをモデルにバインドしたいのですが、モデルにカスタムロジックがあるため、これを行う良い方法が見つかりません。

私は偽の/ローカルスコープ変数にバインドしてから、ng-changeでモデルを更新しました。次のように ng-init でチェックボックスの初期値を設定します。

<td ng-repeat="date in dates">
<md-checkbox ng-model="cb.state" aria-label="{{date.txt}}"
ng-change="saveState(person, date, cb.state)" 
ng-init="cb = getState(person, date);" ></md-checkbox>{{date.persons.length }}
</td>

要するに、モデルをチェックボックスにバインドできない理由は、この人のキーが日付オブジェクトの配列にない場合に反映されるためです。以下の私のgetStateとsaveState：

$scope.saveState = function(person, date, state) {
    var index = date.persons.indexOf(person.name);

    if (state && index >= 0) {
        date.persons.splice(index, 1);
    } else if (!state && index < 0) {
        date.persons.push(person.name);
    }

    dates.$save(date);
};

$scope.getState = function(person, date) {
    return { state : date.persons.indexOf(person.name) < 0 };
};

これは実際に機能します。これは素晴らしいことです。別のクライアントがモデルを更新すると、問題が発生します。モデルが変更されると、ビューも変更されます。私は実際に人の配列の更新された新しい長さを取得します（そのため、例に入れました）-{{ date.persons.length }}更新されます。一方、私のチェックボックスは更新されていません - ng-init は再び呼び出されず (最初の初期化でのみ呼び出されます)、私の ng-change も呼び出されないので、これは明らかです - チェックボックスがそれ自体が変更/クリックされます。

最善のアプローチが何であるかを理解しようとしていますが、決心できません。次のように、グリッドの完全な再作成をトリガーする実用的なソリューションがあります (これng-repeatは 1 人だけのためのものです。人のリスト = 大きなグリッドの日付のリストがあります)。

dates.$watch(function (eventData) {
  dates = $scope.dates = $firebaseArray(fb.child("dates"));
});

更新するすべてのデータのために画面がちらつきます-このイベントが到着してすべてを更新するときに、1つのクライアントのユーザーがグリッドを更新するとどうなるか心配です。

私が考えている別の解決策は、 eventData をチェックして変更された日付を把握し、この日付のすべてのチェックボックス (各人に 1 つ) を見つけて、変更イベントを手動でトリガーします (jqlite組み込みの angular throughを使用する可能性がありますelement)。ただし、これらのdom操作はangularの宣言性に反するため、その解決策は私には「間違っている」と叫びます。

皆さんは何がベストだと思いますか？

4

1 に答える 1

0

変更を監視するソリューションになりましたが、影響を受ける日付のみを更新しました。これでもリスト内のすべての人が更新されますが、少なくとも 1 つの日付に対してのみ更新されます。

_dates.$watch(function (eventData) {
  var record = _dates.$getRecord(eventData.key)
  if (!record)
    return;

  var index = _dates.indexOf(record);
  _dates[index] = angular.copy(record);
});

質問/回答をしばらく開いたままにして、誰かがより良い解決策を思い付くことができるかどうかを確認します.

「新しい」_dates 変数は気にしないでください。リファクタリングを行い、それをサービスに移動しました。

于 2015-03-16T09:41:03.637 に答える