Question

我是棱角分明的世界的新手。我刚刚在angularJS中编写了我的第一个程序。但它没有像我期待的那样工作。这是代码。

var sampleApp = angular.module('sampleApp', []);
sampleApp.controller('FinanceController', ['$scope',
  function($scope) {
    $scope.salary = 0;
    $scope.invest = 0;
    $scope.result = function() {
      return $scope.salary * $scope.invest * 0.01;
    }
    $scope.result2 = $scope.salary * $scope.invest * 0.01;
  }
])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="sampleApp">

<head>

</head>

<body ng-controller="FinanceController">
  Salary
  <input type="text" name="salary" ng-model="salary">
  <br>Percentage to spend on gadgets
  <input type="text" name="invest" ng-model="invest">
  <br>
  <span>Case1: Total Amount in Rs. {{result()}} </span>
  <br/>
  <span>Case2: Total Amount in Rs. {{result2}} </span>

</body>

</html>

我不明白为什么我的case2没有显示正确的结果？

Answer 1

result2只计算一次，永不更新。在$watch和salary发生更改时，您可能需要invest更新它。

像：

$scope.$watch('salary+invest', function(newValue, oldValue) {
  $scope.result2 = $scope.salary * $scope.invest * 0.01;
});

Answer 2

如果您只想查看值，[而不是操纵它]，请将您的html更改为

<span>Case2: Total Amount in Rs. {{salary * invest * 0.01}} </span>

根据评论，分配只进行一次。赋值语句的右侧返回一个值，并将其分配给范围变量，业务在那里结束。

要加起来，Angular Data绑定会自动更新绑定到视图中输入元素的立即变量，而不是由使用此立即变量构造的某个表达式形成的变量。

如果您确实想要存储和操作该值，您应该按照另一个答案的建议使用$ watch ..

双向数据绑定不能与表达式一起使用

2 个答案: