Как обновить значение модели при вводе пользователем через Angular JS?

Я пытаюсь создать приложение для расчета налога, используя angular.js в качестве учебного пособия, чтобы понять структуру. Первое, что я заметил, это то, что пользовательский ввод по умолчанию считается строкой, что, очевидно, делает функцию суммирования конкатенацией строк, а не числовой операцией, см. здесь:

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 есть встроенная функция для изменения типов значений?


angularjs angularjs-directive angularjs-ng-change
person irwin    schedule 30.03.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Измените тип ввода на число.

<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), вы можете легко создать директивы, чтобы позаботиться о преобразовании, см., например. Модель ввода изменяется с Integer на String при изменении

person Teemu Kurppa    schedule 30.03.2014
comment
Большое спасибо! Я совершенно забыл об этом типе поля, думаю, я все еще не хочу использовать новые элементы HTML5. Код с директивой — это то, что я тоже искал, обязательно буду использовать его для некоторых преобразований типов. - person irwin; 31.03.2014