更正 angularJS 中的用户输入

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">

这里有一个有效的 fiddle： https://jsfiddle.net/shock/2ju3hfqu/2/

Answer 1

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

你可以查看这个编辑的fiddle。当您键入超过 60 分钟时，它会自动更改为正确的分钟数。如果你愿意，你也可以用小时和秒来做。

看我下面的逻辑，这只是一个例子，如果你愿意，你可以改变它。我只是给你一个想法兄弟

--更新--添加的秒数也会像分钟一样自动转换 --UPDATE-- 不仅可以转换成2位数

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 中的用户输入

Correcting users input in angularJS

javascript

angularjs

angular-directive

angular-filters