我希望我没有错过在DOCO什么明显的，如果我有我敢肯定有人会帮。
我使用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'}}
有我缺少什么捷径？
简而言之：如果你希望你的数据在视图和模型中的不同表现，你需要一个指令 ，你可以认为的双向过滤器 。
你的指令会看起来像
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" />
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'};
});
如果你确实需要一个输入简单地显示一些信息，它是改变角度模式可以让一个更简单的改变一些其他的元素。
而不是写新指令的根本不使用 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'}}" />
而且就像一个魅力:)
该格式化的数字，插入空格每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
角已建成日期格式的功能，但将它应用到一个输入，你最终会希望得到的原始（未格式化的）日期，你需要创建一个自定义的指令 。
例如指令：
(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 />
你不会需要从零创建一个新的过滤器，因为角早已内置过滤器的日期类型。 http://docs.angularjs.org/api/ng.filter:date
我相信这正是你需要的。
