更正angularJS中的用戶輸入

我正在嘗試創建一個將時間轉換爲秒的過濾器，例如：01:30:10至5410，反之亦然，所以最終我的模型中只有秒，用戶得到看到更好的表示。更正angularJS中的用戶輸入

到目前爲止，我成功地創建使用指令工作的例子，不過現在我想嘗試糾正輸入錯誤，特別是這種類型的錯誤：用戶類型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/

來源

2017-03-07 Samuel E.

表明你的觀點。 –

當我說我認爲我的意思是「HTML」，我更新了它 –

當你想更新元素值指令內，您可以使用element.val()

你可以查看這個eddited fiddle。當您鍵入超過60分鐘時，它會自動更改爲適當的分鐘數。如果你願意的話，你也可以用小時和秒。

看到我的邏輯下面這只是一個示例，你可以改變它，如果你想。我只是給你一個想法的兄弟

--UPDATE--添加秒就會自動轉換太喜歡分鐘 --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}`; 
     }); 
    } 
}; 
}]);

來源

2017-03-08 07:40:14

驚人的效果！你忘了更新小提琴鏈接，但代碼的作品！ –

對不起。我剛剛更新。 –

更正angularJS中的用戶輸入

回答

相關問題