在输入元素中使用 angularjs 滤波器

我希望我没有错过什么明显的文件，如果我有，我相信有人会帮助。

我使用 asp.net webapi 返回一个带有日期字段的 DTO，这些字段使用 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'}}

我错过了什么捷径吗？

91504 次浏览
小开

您不需要从零开始创建新的过滤器，因为 angle 已经为日期类型提供了一个内置的过滤器。 Http://docs.angularjs.org/api/ng.filter:date

我相信这正是你需要的。

小开
最佳答案

简而言之: 如果您希望您的数据在视图和模型中具有不同的表示形式，那么您将需要一个 指令，您可以将它看作是一个 双向过滤器双向过滤器。

你的指令看起来像是

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示例。

小开

在输入字段和模型中使用不同的值违背了 ng- 模型的本质。因此，我建议你采取最简单的方法，在控制器中应用你的过滤器，使用一个单独的变量格式化日期，并雇用观察者来保持格式化日期和原始日期同步:

HTML:

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

约翰逊:

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'};


});
小开

完整的数字格式示例，每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/>

例如: http://plnkr.co/edit/qo0h9z

小开

如果输入仅显示数据

如果你实际上需要一个简单的输入 展示的一些信息，它是一些其他的元素，改变的角度模型，你可以做一个更容易的改变。

而不是写新的指令简单的 不要使用的 ng-model和使用良好的，老的 value。

所以不是:

<input data-ng-model=\{\{entity.date|date:'dd/MM/yyyy HH:mm:ss'}}" />

这样就行了:

<input value="\{\{entity.date|date:'dd/MM/yyyy HH:mm:ss'}}" />

而且非常有效:)

小开

Angular 内置了 日期格式功能，但是要将其应用到输入中，您最终希望获得原始(未格式化的)日期，则需要创建一个自定义 指令。

示例指令:

(function () {
'use strict';


angular.module('myApp').directive('utcDate', ['$filter', function ($filter) {
return {
restrict: 'A', //restricting to (A)ttributes
require: 'ngModel',
link: function (scope, elem, attrs, model) {
if (!model) return;


var format = 'MM/dd/yyyy h:mm:ss a';
var timezone = 'UTC';


//format the date for display
model.$formatters.push(function (value) {
//using built-in date filter
return $filter('date')(value, format, timezone);
});


//remove formatting to get raw date value
model.$parsers.push(function (value) {
var date = Date.parse(value);
return !isNaN(date) ? new Date(date) : undefined;
});
}
};
}]);
})();

然后应用它:

<input type="text" ng-model="$ctrl.DateField" utc-date />

提交答案