javascript - 纠正 angularJS 中的用户输入

Question

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

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

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

这是代码的简化版本:

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 分钟时，它会自动更改为正确的分钟。如果您愿意，您还可以使用小时和秒。

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

--更新--添加的秒数也会像分钟一样自动转换--更新--可以转换百位而不仅仅是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}`;
        });
    }
};
}]);