javascript - 写入 Firebase 时将 Angular ng-model 转换为整数

Question

我正在使用 AngularFire 来获取输入并将它们保存到我的 Firebase 数据库中。目前，我有一个输入服务价格的输入，就像这样（我使用“文本”而不​​是“数字”的输入类型，因为我不希望它在旧浏览器中引起问题）：

<p><input type="text" placeholder="Enter your monthly price here" ng-model="priceMonthly" required/></p>

但是，当我在提交表单时（使用更新函数）将其写入 Firebase 时，它​​会将值写入$scope.priceMonthly字符串而不是整数。将此值写为整数而不是字符串的最佳方法是什么？

Answer 1

怎么样type="number"，比如：

<input type="number" ng-model="myText" name="inputName">

由于您只想让用户写入数字。在这种$scope.myText情况下，应该是数字。

作为旁注：

为确保您发送了整数，请在屏幕上打印该值，例如：

<pre>myText as number: {{priceMonthly|json}}</pre>

如果值用引号括起来 - 它是一个字符串，无 - 数字。

Answer 2

只需将其转换为整数：

var priceMonthly = parseInt($scope.priceMonthly, 10);

Answer 3

对于“数字”以外的任何输入类型（文本、范围等），您可以将$parser添加到您的输入中，这将为您转换它的值：

angular.module('exampleApp', [])

.controller('ExampleCtrl', function ($scope) {
    $scope.filter = {
        number: 10
    };
})

.directive('castToInteger', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
            ngModel.$parsers.unshift(function(value) {
                return parseInt(value, 10);
            });
        }
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="exampleApp">
  <div ng-controller="ExampleCtrl">
      <input type="range" min="1" max="100" ng-model="filter.number" cast-to-integer="true" />
      <p>{{filter | json}}</p>
  </div>
</div>

关于该主题的另一个答案：https ://stackoverflow.com/a/16187142/818862