在Angular中使用toFixed()是行不通的

时间:2016-09-04 00:12:31

标签: javascript angularjs

我在这个页面有两个问题 https://plnkr.co/edit/c7r4CAR1WJrOzQUybip2?p=preview

  1. 当美元金额 3 时,它会以欧元计算 2.219999 值。我尝试使用.toFixed(2),但它无效。

  2. 另一个问题是我打电话给ng-model="curr.to()"。即使它正确输出结果,也会出现控制台错误。

    angular.js:13920 Error: [ngModel:nonassign] Expression 'curr.to()' is non-assignable. Element: <input type="number" ng-model="curr.to()" class="ng-pristine ng-untouched ng-valid">

  3. 任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:4)

1。您可能遇到错误,因为toFixed会将数字转换为字符串,而您无法将其绑定到输入。一个简单的Number(watever.toFixed())就行了。

2. 您无法将函数表达式绑定到ngModel,因为它执行双向数据绑定。您也可以使用watch代替。

注意:我个人反对您的1st方法。控制器不应该关心数据在视图上的显示方式。你应该考虑使用过滤器等方法。

但是,这是您工作版本的示例。

&#13;
&#13;
(function(angular) {
  'use strict';

  angular.module('finance', []);
  angular.module('finance').factory('currencyConverter', function() {
    var currencies = ['USD', 'EUR', 'CNY'];
    var usdToForeignRates = {
      USD: 1,
      EUR: 0.74,
      CNY: 6.09
    };

    var convert = function(amount, inCurr, outCurr) {
      var res = amount * usdToForeignRates[outCurr] / usdToForeignRates[inCurr]
      return Number(res.toFixed(2));
    };

    return {
      currencies: currencies,
      convert: convert
    }
  });

  angular.module('currencyConvert', ['finance']);
  angular.module('currencyConvert').controller('currencyCnvtCtrl', ['$scope', 'currencyConverter',
    function InvoiceController($scope, currencyConverter) {
      this.from = 1;
      this.inCurr = 'USD';
      this.outCurr = 'CNY';
      this.currencies = currencyConverter.currencies;

      this.to = 0;

      var w1 = $scope.$watch('curr.from', function() {
        $scope.curr.to = currencyConverter.convert($scope.curr.from, $scope.curr.inCurr, $scope.curr.outCurr);
      });
      var w2 = $scope.$watch('curr.inCurr', function() {
        $scope.curr.to = currencyConverter.convert($scope.curr.from, $scope.curr.inCurr, $scope.curr.outCurr);
      });
      var w3 = $scope.$watch('curr.outCurr', function() {
        $scope.curr.to = currencyConverter.convert($scope.curr.from, $scope.curr.inCurr, $scope.curr.outCurr);
      });
      var w4 = $scope.$watch('curr.to', function() {
        $scope.curr.from = currencyConverter.convert($scope.curr.to, $scope.curr.outCurr, $scope.curr.inCurr);
      });

      $scope.$on('$destroy', function() {
        w1();
        w2();
        w3();
        w4();
      });

    }
  ]);

})(window.angular);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="currencyConvert">
  <h1>Currency Converter</h1>
  <section class="currency-converter" ng-controller="currencyCnvtCtrl as curr">
    <h4>Type in amount and select currency</h4>
    <input type="number" ng-model="curr.from">

    <select ng-model="curr.inCurr">
      <option ng-repeat="c in curr.currencies">{{c}}</option>
    </select>

    <br>
    <input type="number" ng-model="curr.to">

    <select ng-model="curr.outCurr">
      <option ng-repeat='c in curr.currencies'>{{c}}</option>
    </select>
  </section>
</div>
&#13;
&#13;
&#13;