3

タイムスタンプのリストがあります。それらを AngularJS で一覧表示できます。ただし、日付文字列としてリストしたい。これらの日付文字列は編集可能である必要があります。終了したら、関連するタイムスタンプも更新したいと思います。

私の最初の質問は、アイテムを異なる形式 (フィルター?) で表示し、双方向のデータ バインディングを維持する AngularJS の方法は何ですか? (モジュール、ディレクティブ、リスナー?)

ありがとうございました

4

1 に答える 1

7

編集可能なデータが生データ (タイムスタンプ) の場合は、フィルターを使用する必要があります。

ただし、日付文字列形式で編集可能にしたい場合は、ngModel+inputカスタム$parsersとを追加して、 を拡張するディレクティブを作成する必要があります$formatters。

それは確かに非常に簡単です：

app.directive('dateFormat', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attr, ngModelCtrl) {
      ngModelCtrl.$formatters.unshift(function(valueFromModel) {
        // return how data will be shown in input
      });

      ngModelCtrl.$parsers.push(function(valueFromInput) {
        // return how data should be stored in model
      });
    }
  };
});

あなたのHTMLで：

<input type="text" ng-model="date" date-format />

ディレクティブは、ngModelControllerその動作を拡張できるようにする必要があります。

プランカーを作りました。もちろん、単純な日付操作が必要な場合は、ディレクティブ内でプログラムでフィルターを使用することを検討してください。これにより、既に実装されているフィルターを繰り返さなくなります。Plunkerで使っているので、使い方がわかります。

于 2013-03-30T13:10:07.120 に答える