Question

是否有一种将过滤器应用于输入的简单方法？我找到了一些例子，但对我来说听起来像是一个Macgyver解决方案。我的表单是动态定义的，当输入类型为date时，我需要将日期值从2000-01-01T02:00:00.000Z转换为mm/dd/yyyy。

<form role="form">
    <div ng-repeat="fld in grid.columns">
        <label>{{fld.label}}</label>
        <input type="text" ng-model="grid.currentRecord[fld.name]">
    </div>
</form>

我无法在我的案例中使用该建议：（filters on ng-model in an input）

有人帮助我吗？

Answer 1

我找到的最简单的方法：

我已经创建了一个名为'dateformatter'的指令，它基本上定义了一个$formatter来过滤在输入中查看的值，并$parser在将值设置为模型之前对其进行处理：

app.directive('dateformatter', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl) {   
            ctrl.$parsers.unshift(function(viewValue) {
                return new Date(viewValue)
            });      
            ctrl.$formatters.push(function(modelValue) {                    
                return modelValue.toDateString()
            });
        }
    };
});

我在输入标签中添加了'dateformatter'属性：

<form role="form">
    <div ng-repeat="fld in grid.columns">
        <label>{{fld.label}}</label>
        <input type="text" dateformatter ng-model="grid.currentRecord[fld.name]">
    </div>
</form>

它正在运作！

Answer 2

扩展您自己的答案，您可以使用moment.js，将其包装到AngularJS服务中，并创建一个非常灵活的解决方案：

.directive('dateFormat', ['moment', function (moment) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function ($scope, $element, $attrs, ngModelCtrl) {
            ngModelCtrl.$parsers.unshift(function (viewValue) {
                return moment(viewValue, $attrs.dateFormat).toDate();
            });
            ngModelCtrl.$formatters.push(function (modelValue) {
                return moment(modelValue).format($attrs.dateFormat);
            });
        }
    };
}])

将像这样使用：

<input type="text" ng-model="some.model" date-format="MM/DD/YYYY">

angularjs - 输入过滤器

2 个答案: