在input元素中使用angularjsfilter
我希望我没有遗漏任何明显的东西，如果我有我相信有人会帮助。
我正在使用asp.net webapi返回一个DTO，带有date字段。 这些序列化使用JSON.Net（格式为“2013-03-11T12：37：38.693”）。
我想使用一个filter，但在一个INPUT元素，这是可能的，或者我应该创build一个新的filter或指令来完成这个？
// 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'}} 有什么捷径我错过了吗？
简而言之：如果您希望数据在视图和模型中具有不同的表示forms，则需要一个指令 ，您可以将其视为双向filter 。
你的指令看起来像
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的例子。
在你的input领域和你的模型中有不同的价值观是违背ng模型的本质的。 所以我build议你采取最简单的方法，并在控制器中应用你的filter，使用单独的variables格式化date，并雇用观察者保持格式化和原始date同步：
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'}; });
如果你的input只显示数据
如果你真的需要一个input来简单地显示一些信息，而且它是改变 Angular模型的其他元素，那么你可以做出一个更容易的改变。
不要简单地写新指令， 不要使用 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/>
普朗克例如： http ://plnkr.co/edit/qo0h9z
你不需要从零开始创build一个新的filter，因为angular已经有了一个内置的datetypesfilter。 http://docs.angularjs.org/api/ng.filter:date
我相信这正是你所需要的。
