Question

我正在尝试构建一个用于计算税收的应用程序，使用angular.js作为tutotrial让我理解框架。我注意到的第一件事是默认情况下用户输入假定为字符串，这显然使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" />

它将自动转换为数字。

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

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

1 个答案: