Javascript 在angularJS中更正用户输入

我正在尝试创建一个将时间转换为秒的过滤器，例如：

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

这里有一把小提琴：

---

要更新指令中的元素值，可以使用

element.val（）

你可以检查一下这个eddited。当您输入超过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}`;
        });
    }
};
}]);

app.directive（'timeConverter'，['$filter'，function（$filter）{
返回{
要求：'ngModel'，
链接：函数（范围、元素、属性、ngModelController）{
ngModelController.$parsers.push（函数（格式化时间）{
设re=/^（？（？：（？：（\d+））（\d{1,3}））：）（\d{1,3}）$/，
timeArray=re.exec（formattedTime），
//设置一些默认值，如果找不到一个数字，它将等于未定义。
小时=数字（时间数组[1]）| | 0，
分钟=数字（时间数组[2]）| | 0，
秒=数字（时间数组[3]）| | 0；
hr=0；
mn=0；
控制台日志（小时、分钟、秒）；
如果（分钟>=60秒>=60）{
hr=数学楼层（分钟/60）；
mn=数学地板（秒/60）；
如果（hr>=1 | mn>=1）{
remMin=分钟%60；
remSec=秒%60；
remSec=（remSec<10）“'0'+remSec:remSec；
newMin=mn+remMin；
newMin=（newMin<10）？'0'+newMin:newMin；
新小时=小时+小时；
newHour=（newHour<10）？'0'+newHour:newHour；
chngeFrmat=[newHour，newMin，remSec]；
console.log（chngeFrmat.join（“：”）；
val（chngeFrmat.join（'：'）；
}
}
控制台日志（分钟）；
log（timeArray）；
//基础数学，我使用brakets因为它更容易阅读…不要判断。
返回时间（（小时*60）*60）+（分钟*60）+秒；
});
ngModelController.$formatters.push（函数（完整秒）{
让小时数=数学楼层（满秒/60/60），
分钟=数学地板（完整秒/60）%60，
秒=数学地板（完整秒数%60）；
返回`${hours}:${minutes}:${seconds}`；
});
}
};
}]);

要更新指令中的元素值，可以使用

element.val（）

你可以检查一下这个eddited。当您输入超过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}`;
        });
    }
};
}]);

app.directive（'timeConverter'，['$filter'，function（$filter）{
返回{
要求：'ngModel'，
链接：函数（范围、元素、属性、ngModelController）{
ngModelController.$parsers.push（函数（格式化时间）{
设re=/^（？（？：（？：（\d+））（\d{1,3}））：）（\d{1,3}）$/，
timeArray=re.exec（formattedTime），
//设置一些默认值，如果找不到一个数字，它将等于未定义。
小时=数字（时间数组[1]）| | 0，
分钟=数字（时间数组[2]）| | 0，
秒=数字（时间数组[3]）| | 0；
hr=0；
mn=0；
控制台日志（小时、分钟、秒）；
如果（分钟>=60秒>=60）{
hr=数学楼层（分钟/60）；
mn=数学地板（秒/60）；
如果（hr>=1 | mn>=1）{
remMin=分钟%60；
remSec=秒%60；
remSec=（remSec<10）“'0'+remSec:remSec；
newMin=mn+remMin；
newMin=（newMin<10）？'0'+newMin:newMin；
新小时=小时+小时；
newHour=（newHour<10）？'0'+newHour:newHour；
chngeFrmat=[newHour，newMin，remSec]；
console.log（chngeFrmat.join（“：”）；
val（chngeFrmat.join（'：'）；
}
}
控制台日志（分钟）；
log（timeArray）；
//基础数学，我使用brakets因为它更容易阅读…不要判断。
返回时间（（小时*60）*60）+（分钟*60）+秒；
});
ngModelController.$formatters.push（函数（完整秒）{
让小时数=数学楼层（满秒/60/60），
分钟=数学地板（完整秒/60）%60，
秒=数学地板（完整秒数%60）；
返回`${hours}:${minutes}:${seconds}`；
});
}
};
}]);

显示您的视图。当我说“视图”时，我是指“html”，我更新了它如何显示您的视图。当我说“视图”时，我是指“html”，我更新了它，使它工作起来更简单！您忘了更新fiddle链接，但代码仍然有效！真是太棒了！您忘了更新fiddle链接，但代码仍然有效！