Question

我正在制作一个费用计算器页面，其中有一个转盘，允许人们选择有价格的商品。

然后，该价格将每月有另一个选择器。

因此，总费用是每月的价格*次数（tpm）。

如果我把它放到页面中，那就是{{price * tpm}}。

我对这种实现方法没问题，如果它只是这两个变量，但这实际上是未来的价格计算器。还有两个额外的房产：年和利率。

因此，实际计算将是：（（（价格* tpm）* 12）*年）*％。

我真的不想在页面中有这个。我宁愿把计算放在模型中，只是在视图html中显示最终的计算结果。

我的应用程序非常复杂，布局方面，但我已经提出了一个小小的演示逻辑。

http://jsfiddle.net/scott_in_ct/SPN8V/

$scope.$watch(
    function(){
        return $scope.price * $scope.item1TPM * $scope.years * $scope.int;
    }, 
    function(newVal, oldVal) {
        $scope.total = $scope.price * $scope.item1TPM * 12;
        $scope.totalOverTime = $scope.price * $scope.item1TPM * $scope.years * $scope.int;
});

我刚才意识到的问题是，如果字段与使用ng-if显示/隐藏其内容的包装器组合在一起，则结果不一致。

- 斯科特

Answer 1

编辑ng-if：

小心ng-if。它完全从DOM树中删除节点。所以他们根本不存在。通常它是你想要的东西。但通常ng-show是要走的路。在您的情况下，如果您将问题跟踪到ng-if，则ng-show可能应该为您解决问题。

如果您不想摆弄手表并且计算本身并不昂贵，您可以使用功能绑定。

在范围内声明函数，如下所示：

$scope.calculatePrice = function (){
return  (((price * tpm) * 12) * years) * %;//here your calculation that makes sense in controller context
};

然后将其绑定在html中，就像那样

<div>{{calcualetPrice()}}</div>

请注意，可以多次评估功能绑定，但它可以让您省去微调手表等的麻烦。在函数表达式中使用的任何时候变量都应该刷新。还有一些。

AngularJS - 计算器页面 - 多个属性相乘

1 个答案: