将AngularJS表达式存储在输入中

时间:2016-04-28 10:57:40

标签: javascript css angularjs

从下面可以看到,我在一个输入中计算表达式{{ annualIncome * 4.5 }},并在另一个输入中重新计算相同的表达式,而不是存储表达式的结果并将其传递给另一个输入因为我不确定如何做到这一点。

示例:

%label Equity Loan ({{ selectedLocation.loan }}%):
%input#equity_loan{ "disabled" => "disabled", "value" => "{{ selectedLocation.mortgage === 55 ? ((annualIncome * 4.5) / 11) * 9 : ((annualIncome * 4.5) / 15) * 4 }}" }

%label Mortgage ({{ selectedLocation.mortgage }}%):
%input#mortgage{ "disabled" => "disabled", "value" => "{{  annualIncome * 4.5 }}" }

我已经尝试过ng-model,但它似乎没有用。

另外,我尝试通过添加" |来将值更改为货币货币"在我的表达结束时,这也没有用,但我猜这可能是因为我需要转换每个表达式结果?

1 个答案:

答案 0 :(得分:1)

好吧,你不能在角度表达式中使用变量,但是你可以在改变年收入变量之后在你的控制器中做到这一点;使用"ng-model" => "annualIncome"语句绑定到您的视图中。

为了在更改值后计算值,您可以在示波器中设置监视。每次更新值时都会调用该函数。如果您想添加延迟而不立即计算,可以使用ng-model-options中的去抖动选项;例如:

%input{"ng-model-options" => "{debounce: { 'default': 500, 'blur': 0 }}"}

然后,这只是一种使用变量构建代码的方法。

$scope.$watch('annualIncome', function(value, oldValue) {
  var annualIncome = value; // same as $scope.annualIncome
  var parts = selectedLocation.mortgage === 55 ? 11 : 15;
  var factor = selectedLocation.mortgage === 55 ? 9 : 4;
  var annualValue = annualIncome * 4.5;
  $scope.result = {
    propertyValue: annualValue + (annualValue / parts) + ((annualValue / parts) * factor),
    deposit: annualValue / parts
    // and so on..
  };
});

由于在作用域上设置了结果变量,因此可以使用属性绑定在视图中绑定它。

%input#property_value{ "disabled" => "disabled", "value" => "{{ result.propertyValue }}" }