AngularJS 以不同的格式显示输入值，同时在模型中保持相同的格式

Question

我得到一个整数，表示以分钟为单位的持续时间，但如果大于特定值，我想将其显示为小时或天，但我仍想以分钟为单位保留 ng-model 值，因此，如果用户对值进行了任何更改，并且我的应用程序将其读回，则应该在几分钟内。

例如： 如果我读到“480 分钟”，则显示应该是 8（小时）。 如果我读到“1440 分钟”，它应该是 1（天）。 如果用户将其更改为 0.5（天），则 ng-model 中的值应为 720。

我想将数字部分保留在输入中，而度量单位（分钟/小时/天）保留在输入右侧的标签中。

我创建了一个如下所示的“持续时间”过滤器：

myApp.filter('duration', function() {
  //Returns duration from minutes in hours
    return function(minutes) {
      var hours = Math.floor(minutes / 60);
      return hours;
    }
});

但是，当我将它添加到以下元素时

...list iteration through fields, where textField is the current iteration object
    <input type="number" class="text-input" ng-model="textField.CustomFieldValue | duration">

它在控制台中显示一条错误消息：

[ngModel:nonassign] Expression 'textField.CustomFieldValue | duration' is non-assignable. Element: <input type="number" class="text-input ng-pristine ng-untouched ng-valid" ng-model="textField.CustomFieldValue | duration">

我知道我的过滤器（还）不正确，但我只是将它用于小测试。

我对 AngularJS 不是很熟悉，所以我可能以错误的方式使用过滤器。

过滤器正在工作，但是，如果值为 480，我确实会显示 8 小时，但我担心控制台中的错误消息。

Answer 1

我认为在ng-model 中附加filter 不是一个好主意！它主要会给你一个max-digest 错误。这是我的解决方案，实现ng-model formatters and parsers，这是一篇很棒的文章，可以帮助您开始使用！

Formatters and Parsers

基本上，对于我的解决方案，我创建了新指令来实现 hours 和 days 的逻辑，格式化程序执行逻辑，解析器反转逻辑，否则 ng-model 将丢失原始值。检查我下面的sn-p！

var app = angular.module('myApp', []);

app.controller('MyController', function MyController($scope) {
  $scope.textField = 480;
});

app.directive('timeParser', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    scope: {
      timeParser: "@"
    },
    link: function(scope, element, attr, ngModel) {
      ngModel.$formatters.push(function(minutes) {
        if (scope.timeParser === "hours") {
          return Math.floor(minutes / 60);
        } else if (scope.timeParser === "days") {
          return Math.floor(minutes / (60 * 24));
        } else {
          return minutes;
        }
      });

      ngModel.$parsers.push(function(minutes) {
        if (scope.timeParser === "hours") {
          return Math.floor(minutes * 60);
        } else if (scope.timeParser === "days") {
          return Math.floor(minutes * (60 * 24));
        } else {
          return minutes;
        }
      });

    }
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
  Minutes
  <input type="number" class="text-input" ng-model="textField">
  <br> Hours
  <input type="number" class="text-input" ng-model="textField" time-parser="hours">
  <br> Days
  <input type="number" class="text-input" ng-model="textField" time-parser="days">
</div>