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

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

当您考虑时...如果您将过滤器应用于绑定变量，那么当您输入某些内容时它就会被格式化。现在如果你输入“1”，你最终会得到“0:01”的格式化值。很好，但这会再次触发过滤器，你最终会得到“NaN：NaN”。

您可以使用自定义过滤器并通过使用例如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);
}