Question

我有一个文字输入，我想填写一个函数的输出，但是我不知道它为什么不起作用？

这是我的HTML代码：

   <input type="text" min="0" ng-model="Resqty" size="10" required >

在angularJS中我做：

      $scope.Resqty = $scope.total($scope.out);
      $scope.total = function total(out) {
         return data.convert($scope.qty, $scope.in, out);
      };

我也尝试将函数直接放入如下，但它既不起作用：

      $scope.Resqty = data.convert($scope.qty, $scope.in, $scope.out);

然而，在html代码中我放{{total（out）}}它有效！我也尝试直接设置一个值来验证它是否有效!!

      $scope.Resqty = 1;

有谁知道文本输入为什么没有正确获取值？以下是Demo

的链接

提前谢谢！

Answer 1

尝试以下方法：

$scope.formData = { Resqty: null };

$scope.formData.Resqty = $scope.total($scope.out);

视图：

<input type="text" min="0" ng-model="formData.Resqty" size="10" required >

顺便说一下，你的函数在语法上是不正确的：

// 2 times total, take out the second
$scope.total = function total(out) {

Answer 2

哇！您的代码中存在很多错误，因为您已经引用了控制器，因为您可以看到所有这些以更新它并按照您的需要工作：

JS：

(function(angular) {
  'use strict';
  angular.module('invoice1', [])
    .controller('InvoiceController', function($scope) { // <---here you missed the $scope in the controller
      $scope.qty = 1; // <---now here on you need to replace all your 'this' to $scope
      $scope.cost = 2;
      $scope.inCurr = 'EUR';
      $scope.currencies = ['USD', 'EUR', 'CNY'];

      $scope.usdToForeignRates = {
        USD: 1,
        EUR: 0.74,
        CNY: 6.09
      };

      $scope.total = function(outCurr) {
        return $scope.convertCurrency($scope.qty * $scope.cost, $scope.inCurr, outCurr);
      };
      $scope.convertCurrency = function(amount, inCurr, outCurr) {
        return amount * $scope.usdToForeignRates[outCurr] / $scope.usdToForeignRates[inCurr];
      };
      $scope.pay = function() {
        window.alert("Thanks!");
      };
      $scope.Resqty = $scope.total($scope.inCurr);
    });
})(angular);

现在你的标记：

<div ng-app="invoice1" ng-controller="InvoiceController as invoice">
  <b>Invoice:</b>
  <div>
    Quantity:
    <input type="number" min="0" ng-model="qty" required>
  </div>
  <div>
    Costs:
    <input type="number" min="0" ng-model="cost" required>
    <select ng-model="inCurr">
      <option ng-repeat="c in currencies">{{c}}</option>
    </select>
  </div>
  <div>
    <b>Total:</b>
    <span ng-repeat="c in currencies">
      {{total(c) | currency:c}}
    </span>
    <input type="text" min="0" value="{{Resqty}}" size="10" required>
    <button class="btn" ng-click="pay()">Pay</button>
  </div>
</div>

Check this if you want something like.

Answer 3

已更新：此行 $ scope.Resqty = $ scope.total（inCurr）; 将始终为您提供未定义的错误功能当您调用此 $ scope.Resqty 时，它不会将任何参数传递给函数，因此不会调用此函数。您可以通过不将参数传递给函数来复制它：

这样：

$scope.Resqty =  $scope.total();
//Also no parameter in this function
 $scope.total = function() {
 //return $scope.convertCurrency($scope.qty * $scope.cost, $scope.inCurr, outCurr);
};

此代码现在正常运行...

<body >
 <div ng-app="invoice1" ng-controller="InvoiceController as invoice">
 <b>Invoice:</b>
 <div>
Quantity: <input type="text" min="0" ng-model="qty" required >
</div>

<div>
Costs: <input type="text" min="0" ng-model="cost" required >

<select ng-model="inCurr">

<option ng-repeat="c in currencies">{{c}}</option>
</select>
</div>

<div>  
  Res: <input type="text" min="0" required value={{total(outCurr)}}>
 <select ng-model="outCurr">

 <option ng-repeat="c in currencies">{{c}}</option>
</select>
</div>
<div>
  <b>Total:</b>

<span ng-repeat="c in currencies">

 {{total(c) | currency:c}}
  </span>
  <button class="btn" ng-click="pay()">Pay</button>
  </div>

 </div>
 </body>

JS CODE：

 (function(angular) {
 'use strict';
  angular.module('invoice1', [])
 .controller('InvoiceController', function($scope) {
  $scope.qty = 1;
  $scope.cost = 2;
  $scope.inCurr = 'EUR';
  $scope.outCurr = 'EUR';
  $scope.currencies = ['USD', 'EUR', 'CNY'];

  $scope.usdToForeignRates = {
    USD: 1,
    EUR: 0.74,
    CNY: 6.09
  };

  $scope.total = function(outCurr) {
    return $scope.convertCurrency($scope.qty * $scope.cost, $scope.inCurr, outCurr);        
  };
  $scope.convertCurrency = function(amount, inCurr, outCurr) {
    return amount * $scope.usdToForeignRates[outCurr] / $scope.usdToForeignRates[inCurr];
  };
  $scope.pay = function() {
    window.alert("Thanks!");
  };
  $scope.Resqty = $scope.total($scope.outCurr);   
  });
})(angular);

已更新：此 $ scope.Resqty = $ scope.total（$ scope.outCurr）; 无法更新因为在此值中只会在加载时分配一次。要更新文本框中的值，您需要每次在事件上调用该函数。然后只会更新它。

无法在angularJS中填写文本输入

3 个答案:

JS：

现在你的标记：

Check this if you want something like.