AngularJS以不同的格式顯示輸入值，同時在模型中保持相同的格式

Question

我得到一個整數，表示以分鐘爲單位的持續時間，但如果大於特定值，我想將其顯示爲小時或天數，但我仍然希望在幾分鐘內保持ng-model值，所以如果用戶對該值進行了任何更改，並且我的應用程序將其讀回，則應該在幾分鐘內完成。

例如： 如果我讀'480分鐘'，顯示屏會顯示8（小時）。 如果我讀了'1440分鐘'，它應該是1（天）。 如果用戶將其更改爲0.5（天），那麼ng模型中的值應該爲720.

我想將數字部分保留在輸入中，而測量單位（分鐘/小時/天）在輸入右側的標籤中。

我創建了一個「持續時間」過濾器，看起來像這樣：

myApp.filter('duration', function() { 
    //Returns duration from minutes in hours 
    return function(minutes) { 
     var hours = Math.floor(minutes/60); 
     return hours; 
    } 
}); 

然而，當我將其添加到以下元件

...list iteration through fields, where textField is the current iteration object 
    <input type="number" class="text-input" ng-model="textField.CustomFieldValue | duration"> 

它示出了在控制檯的錯誤消息：

[ngModel:nonassign] Expression 'textField.CustomFieldValue | duration' is non-assignable. Element: <input type="number" class="text-input ng-pristine ng-untouched ng-valid" ng-model="textField.CustomFieldValue | duration"> 

我知道我的過濾器不正確（但），但我只是用它做了一點測試。

我對AngularJS並不熟悉，所以我可能會以錯誤的方式使用過濾器。

但是，過濾器正在工作，所以對於480的值，我確實顯示了8個小時，但我擔心控制檯中的錯誤消息。

Answer 1

我不認爲在ng-model中附加filter是個不錯的主意！它主要會給你一個max-digest錯誤。這是我的解決方案，執行ng-model formatters and parsers，這是真棒文章，讓你開始這個！

Formatters and Parsers

基本上我的解決方案，我創建這將實現邏輯hours和days新的指示，格式化做邏輯和語法分析器反轉邏輯，否則ng-model將失去原有的價值。檢查我的下面的片段！

var app = angular.module('myApp', []); 
 

 
app.controller('MyController', function MyController($scope) { 
 
    $scope.textField = 480; 
 
}); 
 

 
app.directive('timeParser', function() { 
 
    return { 
 
    restrict: 'A', 
 
    require: 'ngModel', 
 
    scope: { 
 
     timeParser: "@" 
 
    }, 
 
    link: function(scope, element, attr, ngModel) { 
 
     ngModel.$formatters.push(function(minutes) { 
 
     if (scope.timeParser === "hours") { 
 
      return Math.floor(minutes/60); 
 
     } else if (scope.timeParser === "days") { 
 
      return Math.floor(minutes/(60 * 24)); 
 
     } else { 
 
      return minutes; 
 
     } 
 
     }); 
 

 
     ngModel.$parsers.push(function(minutes) { 
 
     if (scope.timeParser === "hours") { 
 
      return Math.floor(minutes * 60); 
 
     } else if (scope.timeParser === "days") { 
 
      return Math.floor(minutes * (60 * 24)); 
 
     } else { 
 
      return minutes; 
 
     } 
 
     }); 
 

 
    } 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-controller='MyController' ng-app="myApp"> 
 
    Minutes 
 
    <input type="number" class="text-input" ng-model="textField"> 
 
    <br> Hours 
 
    <input type="number" class="text-input" ng-model="textField" time-parser="hours"> 
 
    <br> Days 
 
    <input type="number" class="text-input" ng-model="textField" time-parser="days"> 
 
</div>