74

doco で明白なことを何も見逃していないことを願っています。もしあれば、誰かが助けてくれると確信しています。

日付フィールドを含む DTO を返すために asp.net webapi を使用しています。これらは、JSON.Net を使用してシリアル化されます ('2013-03-11T12:37:38.693' の形式)。

フィルターを使用したいのですが、INPUT 要素でこれは可能ですか、それとも新しいフィルターまたはディレクティブを作成する必要がありますか?

// this just displays the text value
<input ui-datetime type="text" data-ng-model="entity.date" /> 
// this doesn't work at all
<input ui-datetime type="text" data-ng-model="{{entity.date|date:'dd/MM/yyyy HH:mm:ss a'}}" /> 
// this works fine
{{entity.date|date:'dd/MM/yyyy HH:mm:ss a'}}

私が見逃しているショートカットはありますか？

4

6 に答える 6

131

要するに、データをビューとモデルで異なる表現にしたい場合は、双方向フィルターと考えることができるディレクティブが必要になります。

あなたのディレクティブは次のようになります

angular.module('myApp').directive('myDirective', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelController) {
      ngModelController.$parsers.push(function(data) {
        //convert data from view format to model format
        return data; //converted
      });

      ngModelController.$formatters.push(function(data) {
        //convert data from model format to view format
        return data; //converted
      });
    }
  }
});

HTML:

<input my-directive type="text" data-ng-model="entity.date" />

jsFiddle の実際の例を次に示します。

于 2013-03-11T18:49:15.780 に答える
20

入力フィールドとモデルで異なる値を持つことは、ng-model の性質に反します。したがって、最も単純なアプローチを採用して、コントローラー内でフィルターを適用し、フォーマットされた日付に別の変数を使用し、ウォッチャーを使用してフォーマットされた日付と元の日付を同期させることをお勧めします。

HTML:

<input ui-datetime type="text" data-ng-model="formattedDate" />

JS:

app.controller('AppController', function($scope, $filter){

  $scope.$watch('entity.date', function(unformattedDate){
    $scope.formattedDate = $filter('date')(unformattedDate, 'dd/MM/yyyy HH:mm:ss a');
  });

  $scope.$watch('formattedDate', function(formattedDate){
    $scope.entity.date = $filter('date')(formattedDate, 'yyy/MM/dd');
  });

  $scope.entity = {date: '2012/12/28'};

});
于 2013-03-11T19:05:33.393 に答える
3

数字を書式設定し、末尾から 3 文字ごとにスペースを挿入する完全な例:

'use strict'
String::reverse = ->
  @split('').reverse().join('')

app = angular.module('app', [])
app.directive 'intersperse', ->
  require: 'ngModel'
  link: (scope, element, attrs, modelCtrl) ->
    modelCtrl.$formatters.push (input) ->
      return unless input?
      input = input.toString()
      input.reverse().replace(/(.{3})/g, '$1 ').reverse()
    modelCtrl.$parsers.push (input) ->
      return unless input?
      input.replace(/\s/g, '')

使用法：

<input ng-model="price" intersperse/>

Plunkr の例: http://plnkr.co/edit/qo0h9z

于 2013-09-19T06:44:25.880 に答える
-3

angularには日付型の組み込みフィルターが既にあるため、ゼロから新しいフィルターを作成する必要はありません。 http://docs.angularjs.org/api/ng.filter:date

それがまさにあなたが必要としているものだと思います。

于 2013-03-11T16:26:44.800 に答える