Question

我对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和interests.amount。如果balance更新，我怎样才能更改这些getElementsByTagName值？

由于

Answer 1

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

您可以在官方AngularJS documentation page

了解详情

Answer 2

您可以尝试使用$scope.$watch观察balance变量中的所有更改，然后相应地更新interests.amount。

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

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

Answer 3

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

首先，没有像费率[1]那样你应该把它改成$ scope.rates [1]。

第二：你的updatedIntAmount函数包含率[3]，这也是错误的，因为你根据数组索引规则将率[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;
 }
 }

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

3 个答案: