AngularJS書式付き数値の計算

Question

昨日、数値フィールドで書式設定された数値を作成する方法に問題がありましたが、これを実現するようになりました。計算方法に問題があります。

index.htmlを

<div ng-controller="MyCtrl"> 
    <input ng-model="var.value" class="integers" symbol="°" /> 
    <br /><br /> 
    {{var.value * 100}} 
</div> 

app.js

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

angular.module('ui.numeric', []).directive('integers', function() { 
return { 
    require: 'ngModel', 
    restrict: 'EACM', 
    link: function(scope, element, attrs, modelCtrl) { 
     scope.$watch(element, function() { 
      var formatted_number = accounting.formatMoney(element.val(),"", 2,",",".","%s%v"); 
      modelCtrl.$setViewValue(formatted_number); 
      modelCtrl.$render(); 
     }); 
     element.bind('blur', function() { 

      var formatted_number = accounting.formatMoney(element.val(),"", 2,",",".","%s%v"); 
      modelCtrl.$setViewValue(formatted_number); 
      modelCtrl.$render(); 
      scope.$apply(); 
     }); 
     element.bind('focus', function() { 
      var plainNumber = accounting.unformat(element.val()) 
      if(plainNumber == "0") plainNumber = ""; 
      modelCtrl.$setViewValue(plainNumber); 
      modelCtrl.$render(); 
      scope.$apply(); 
      console.log("I am focused!") 
     }); 
    } 
}; 
}); 

function MyCtrl($scope) { 
    $scope.var = {"value":1000.36}; 
} 

フィールドの値が千未満である場合には動作しますが、私は1000年に達すると、番号がフォーマットされるだろうカンマで1,000となり、文字列になり、これ以上計算できなくなります。

私が望むのは、（表示するために）数値フィールドを適切にフォーマットすることですが、各数値フィールドで別々の変数を使用せずに計算を行うために真の値を保持しています。

フィドルをご覧ください。ありがとう！

http://jsfiddle.net/aldesabido/1syh7cne/6/

更新フィドル： http://jsfiddle.net/aldesabido/1syh7cne/14/

対処： はmodelCtrl.viewValue（数）の表示のみ影響されるようではない実際の値にmodelCtrl.setViewValue（番号）を変更（しかし、この回避策についてはわからない）。ヘルプみんなのため

http://jsfiddle.net/aldesabido/1syh7cne/18/

ありがとう！

Answer 1

唯一の解決策は、コントローラ上の{{ var.value }}の変化を監視することです：

function MyCtrl($scope) { 
    $scope.var = {"value":1000.36}; 

    $scope.$watch('var.value', function(val) { 
     $scope.numbericVal = accounting.unformat(val); 
    }); 
} 

そして、このようなあなたのビューでnumericValを使用します。{{numbericVal * 2}}

例： http://jsfiddle.net/1syh7cne/7/

---

コールバック関数を使用する別のRAWの例値は変更されます： http://jsfiddle.net/1syh7cne/9/

属性を使用して、オブジェクトと現在の数値を渡す関数を定義しました。ファンクションの2番目のパラメータを信頼する代わりに、渡されたオブジェクトのvalを解析するだけでよいことに注意してください。

var invoker = $parse(attrs.updateFunc); 
invoker(scope, {number: plainNumber}); 

ちょっと見てみてください。あなたが私が何をしたのか分かります。しかし、私が言ったように - それは可能な解決策の一般的な方向です。

Answer 2

Angularのみに限定されない場合は、必要なだけ正確にaccounting.jsライブラリをチェックアウトすることができます。

次に、計算にのみ使用する$ scopeに変数を保存し、書式設定のためにaccounting.jsを使用してvar.valueとその他の$ scope変数の間の状態を維持することもできます。

こちらがお役に立てば幸いです。がんばろう。私は考えることができる