使用函数更新数组中的值 - Angular JS答案

【问题标题】：Updating a value in an array using a function - Angular JS使用函数更新数组中的值 - Angular JS
【发布时间】：2015-08-27 17:30:02
【问题描述】：

我对 AngularJS 比较陌生，发现自己有点困惑。

这是我的控制器：

app.controller("calcController", function($scope) {
 $scope.interests=[{time:'month',amount:0},
                 {time:'quarter',amount:0},
                 {time:'year',amount:0}];

 $scope.rates=[{rate:0.01,lower:0,upper:1000,desc:'£0 - £1000'},
             {rate:0.02,lower:1000,upper:5000,desc:'£1000 - £5000'},
             {rate:0.03,lower:5000,upper:'none',desc:'£5000+'},];

 $scope.balance=0;
 $scope.updatedIntAmount=function(balance){
   if(balance<0){
       return 0;
   }
   else if(balance>=rates[1].lower && balance<rates[1].upper){
       return balance*rates[1].rate;
   }
   else if(balance>=rates[2].lower && balance<rates[2].upper){
       return balance*rates[2].rate;
   }
   else {
       return balance*rates[3].rate;
   }
 }
});

我想要的是某种将interests.amount 的值绑定到updatedIntAmount 的方法。

这是我的 HTML：

<div ng-controller="calcController" class="container">
  <div class="form-group">
    <label for="balInput">Balance:</label>
    <input id="balInput" type="text" class="form-control" ng-model="balance">
  </div> 
  <p ng-repeat="interest in interests">{{'per '+interest.time+':'+interest.amount}}</p>
</div>

所以我所拥有的是interests.amount 依赖于calculateIntAmount，而后者又依赖于rates.rate 和balance。如何在更新 balance 时更改这些 interests.amount 值？

谢谢

【问题讨论】：

您能否举例说明余额变化导致interests.amount 的后续变化？
你不能让interests.amount 值等于某个计算吗？

标签： javascript html arrays angularjs

【解决方案1】：

尝试将ng-change 添加到您的输入字段中，例如<input id="balInput" type="text" class="form-control" ng-model="balance" ng-change="updatedIntAmount(balance)">。这将允许您在更改输入字段时调用该函数，从而在控制器中的函数中执行您想要的任何操作。

您可以在官方AngularJS documentation page了解更多

【讨论】：

【解决方案2】：

您可以考虑使用$scope.$watch 来观察您的balance 变量的任何变化，然后相应地更新您的interests.amount。

在您的控制器中，您将拥有：

$scope.$watch('balance', function(newBalance) {
  $scope.interests.amount = $scope.updatedIntAmount(newBalance);
});

【讨论】：

【解决方案3】：

您的代码中存在很多错误。

首先没有像 rates[1] 这样的东西，您应该将其更改为 $scope.rates[1]。

第二：您的 updatedIntAmount 函数包含 rate[3] ，这又是错误的，因为根据数组索引规则，您将 rates[2] 作为最大限制。

您的 updatedIntAmount 函数会根据插入的余额返回一个值。在这种情况下，纠正错误后只需添加：

{{updatedIntAmount(balance)}}

在您的 html 代码中。它会随着平衡的变化而改变。

 $scope.updatedIntAmount=function(balance){
 if(balance<0){
     return 0;
 }
 else if(balance>=$scope.rates[0].lower && balance<$scope.rates[0].upper){
     return balance*$scope.rates[0].rate;
 }
 else if(balance>=$scope.rates[1].lower && balance<$scope.rates[1].upper){
     return balance*$scope.rates[1].rate;
 }
 else {
     return balance*$scope.rates[2].rate;
 }
 }

【讨论】：