Question

我正在尝试创建一个将时间转换为秒的过滤器，例如：01:30:10到5410，反之亦然，所以最后我的模型只有秒，而且用户可以看到更好的代表性。

到目前为止，我设法使用指令创建了一个工作示例，但是现在我想尝试纠正输入错误，特别是这种错误：用户类型1:62:30应更正为2:02:30，与秒数相同。

问题是它似乎没有更新视图，但模型确实得到了更新。

这是代码的简化版本：

app.directive('timeFormatter', ['$filter', function($filter) {
    return {
        restrict: "A",
        require: 'ngModel',
        link: function(scope, element, attrs, ngModelController) {

            ngModelController.$parsers.push(function(formattedTime) {
                // here i return a Number usgin math and RegEx
            });

            ngModelController.$formatters.push(function(fullSeconds) {
                // here i return a String formatted like this:
                // return `${hours}:${minutes}:${seconds}`;
            });
        }
    };
}]);

这是html：

<input class="small" type="text" time-formatter ng-model="answer.end">

这里有一个工作小提琴： https://jsfiddle.net/shock/2ju3hfqu/2/

Answer 1

如果要更新指令中的元素值，可以使用element.val()

您可以查看此编辑fiddle。当您键入超过60分钟时，它将自动更改为适当的分钟。如果你愿意，你也可以使用小时和秒。

请参阅下面的逻辑，这只是一个示例，您可以根据需要进行更改。我只是给你一个想法兄弟

- UPDATE--添加的秒数将自动转换为分钟 --UPDATE--不仅可以转换数百个数字

app.directive('timeConverter', ['$filter', function($filter) {
return {
require: 'ngModel',
link: function(scope, element, attrs, ngModelController) {
  ngModelController.$parsers.push(function(formattedTime) {
    let re = /^(?:(?:(?:(\d+):)?(\d{1,3})):)?(\d{1,3})$/,
        timeArray = re.exec(formattedTime),
        // Set some default if a number is not found it will be equal to undefined.
      hours = Number(timeArray[1]) || 0,
      minutes = Number(timeArray[2]) || 0,
      seconds = Number(timeArray[3]) || 0;
     hr = 0;
     mn = 0;
     console.log(hours,minutes,seconds);
     if(minutes >= 60 || seconds >= 60){
            hr = Math.floor(minutes / 60);
        mn = Math.floor(seconds / 60);
        if(hr >= 1 || mn >= 1){
            remMin = minutes % 60;
          remSec = seconds % 60;
          remSec = (remSec < 10)?'0'+remSec:remSec;
          newMin = mn+remMin;
          newMin = (newMin < 10)?'0'+newMin:newMin;
          newHour = hr+hours;
          newHour = (newHour < 10)?'0'+newHour:newHour;
          chngeFrmat = [newHour,newMin,remSec];
          console.log(chngeFrmat.join(':'));
          element.val(chngeFrmat.join(':'));
        }
     }
            console.log(minutes);
    console.log(timeArray);

    // Basic math, i use the brakets because its easier to read... dont judge.
    return ((hours * 60) * 60) + (minutes * 60) + seconds;
  });

  ngModelController.$formatters.push(function(fullSeconds) {
    let hours = Math.floor(fullSeconds / 60 /60),
      minutes = Math.floor(fullSeconds / 60) % 60,
      seconds = Math.floor(fullSeconds % 60);
      return `${hours}:${minutes}:${seconds}`;
        });
    }
};
}]);

在angularJS中更正用户输入

1 个答案: