如何通过 Angular JS 更新用户输入的模型值？

Question

我正在尝试构建一个使用 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 有一个用于更改值类型的内置函数？

Answer 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" />

它会自动转换为数字。

在更复杂的情况下（例如，出于某种原因，您需要输入类型为 text），您可以轻松构建指令来处理转换，参见例如Input model changes from Integer to String when changed