0

フレームワークを理解するためのチュートリアルとして angular.js を使用して税金を計算するためのアプリを構築しようとしています。私が最初に気付いたのは、デフォルトではユーザー入力が文字列であると想定されていることです。これにより、明らかに sum 関数が数値演算ではなく文字列連結になります。ここを参照してください。

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

taxApp.controller('taxController', function($scope) {

    $scope.user_data = {
      income_1: 0.00,
      income_2: 0.00
    };

    $scope.total = function() {
      return $scope.user_data.income_1 + $scope.user_data.income_2;
    };


});

http://jsfiddle.net/96beZ/3/

各属性に parseFloat を追加することもできますが、私のアプリには最終的に約 10 ～ 20 のユーザー入力フィールドと 5 ～ 10 の計算が含まれることになります。コントローラーコードのいたるところで parseFLoat を何度も繰り返すことは避けたいと思います。これまでのところ、ng-change を使用してそのようなものしか得られませんでした:

...
$scope.parseFLoat = function(model) {
  $scope.user_data[model] = parseFloat($scope.user_data[model]);
};
...

http://jsfiddle.net/96beZ/5/

私が気に入らないのは、変数名を渡す必要があるため、モデル名に依存しすぎることです。

おそらくディレクティブを使用して、私が望むものを達成するためのよりスマートな方法はありますか? それとも、Angular には値の型を変更する組み込み関数があるのでしょうか?

4

1 に答える 1

1

入力タイプを数値に変更します

<label for="income-1">Income 1</label>
<input type="number" id="income-1" ng-model="user_data.income_1" />
<label for="income-2">Income 2</label>
<input type="number" id="income-2" ng-model="user_data.income_2" />

自動的に数値に変換されます。

より複雑な状況 (たとえば、何らかの理由で入力タイプをテキストにする必要がある場合) では、変換を処理するディレクティブを簡単に作成できます。たとえば、変更時に入力モデルが整数から文字列に変更されるを参照してください。

于 2014-03-30T09:17:30.330 に答える