Question

我已定义自定义过滤器以将输入数字格式化为特定格式，即hh：mm

过滤

app.filter('formatDuration', function () {
    return function (duration) {
        if (angular.isUndefined(duration) || duration === null || duration.toString().trim() == '') return '';

        var hour = Math.floor(duration / 60);
        var min = duration % 60;
        if (min < 10) {
            min = '0' + min;
        }
        return hour + ':' + min;
    };
});

但是，如果我无法将其与input type = text field data-ng-model = "myModel"绑定。当我在输入字段的data-ng-model中输入内容时，它不会与我的过滤器连接。

<input type="text" name="Duration" class="form-control" data-ng-model="{{Duration | formatDuration" />

但是，如果我用它绑定它，例如value = "{{data-ng-model = Duration | formatDuration}}"比我的自定义过滤器连接并执行所需的转换但未在输入字段中显示格式化值而是显示最初输入的内容..

<input type="text" name="Duration" class="form-control" data-ng-model="Duration" value="{{Duration | formatDuration}}" />

所以，我有几点需要澄清

1）我可以将客户过滤器与data-ng-model绑定吗？根据AngualrJs网站是的，它应该是 2）如果是这样，那我错了？

值得一提的是我的输入字段在ng-repeat ...

中

Answer 1

当你考虑它时......如果你对你的绑定变量应用过滤器，那么当你输入某个东西时它会被格式化。现在，如果您输入＆＃34; 1＆＃34;，您最终的格式化值为＆＃34; 0：01＆＃34;。很好，但这会再次触发过滤器，你最终会得到＆＃34; NaN：NaN＆＃34;。

您可以使用自定义过滤器，并使用例如您的模板上有ng-blur指令，因此过滤只会发生一次。

<input type="text" 
       class="form-control" 
       ng-blur="formatDuration(duration)"
       data-ng-model="duration">

formatDuration将是fn

$scope.formatDuration = function(duration) {
  $scope.duration = $filter('formatDuration')(duration);
}

我可以使用data-ng-model应用/绑定自定义过滤器吗？将自定义过滤器与data-ng-model

1 个答案: