AngularJSモデルで同じフォーマットを維持しながら、異なる形式の入力値を表示する

Question

期間が分で表される整数が表示されますが、特定の値より大きい場合は、時間または日として表示したいしかし、私はまだng-modelの値を数分で保持したいので、ユーザが値を変更して私のアプリケーションがそれを読み取った場合、分でなければなりません。

例： 「480分」と表示された場合、表示は8時間と表示されます。 「1440分」と読んだ場合、1日になるはずです。 ユーザーが0.5（日）に変更すると、ng-modelの値は720になります。

測定単位（分/時間/日）入力の右側にあるラベルに入力します。私はそれがコンソールにエラーメッセージが表示さ

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

次の要素に追加するとき、しかし

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

：

私はこのようになります「期間」フィルタを作成し

私のフィルタは正しくありませんが（まだ）、少しテストのために使用しました。

私は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>