Angular的新手 - 计算变量

Question

我从Knockout转到Angular,我有一些问题.我假设我必须做一些非角度的方式.

http://jsfiddle.net/LostInDaJungle/BxELP/

I linked to jsfiddle so I didn't have to include my code here
Stack Overflow will not let me post my question without a code block.

这是一个非常基本的小提琴,概述了我的两个主要问题......

问题1:val1和val2初始化为3和4,并且正确加起来为7.但是,如果更改文本框中的任何一个值,则新值将被视为字符串,并且我将获得连接而不是添加.将val1更改为4,当它应该是8时你得到44.这种行为的最佳方法是什么？

问题2:计算字段.我可以使用像{{val1 + val2}}这样的大括号来获取计算字段,并在基础模型更改时自动更新计算字段,但这是完全不可接受的.在我的完全成熟的应用程序中,我们生成了一个"成本",在整个过程中使用了几次,每次都要付出成本计算费用.更不用说当这个计算发生变化时,我现在有一个不值得羡慕的任务,就是找到15个不同的地方,使用成本计算并全部更新.

另外,如果我尝试使用大括号在输入上放置ng-model ="cost",那么大括号不起作用.所以没有什么可以作为绑定成本的方式跳出来.

http://jsfiddle.net/LostInDaJungle/QNVwe/

这个例子更像我想要的结构.但是,与ko.observable不同,计算字段在生成它们的值发生更改时不会更新.每个人都强加给我的样板解决方案是编写一堆ng-change处理程序......但这太糟糕了.如果宽度变化会改变成本并改变投资回报计算等等......它很快就会变得混乱.

就逻辑与表示分离而言,这两种方法都失败了.方法一将我的业务逻辑嵌入到我的HTML中.方法二在我的代码中放入了一大堆ng-change处理程序,这与用纯HTML格式编写一大堆onChange处理程序没有多大区别.如果我需要做一堆ng-change处理程序,我会尽快在Javascript中执行onChange处理程序,因为我至少可以在我的表示层之外声明它们.

这是同一个淘汰赛版本:

http://jsfiddle.net/LostInDaJungle/eka4S/2/

这更像我期望的......除了数据绑定我的输入,所有程序逻辑都很好地包含在视图模型中.此外,由于我的可计算机是一个Javascript函数,所以我不必理会如何确保我的两个值是数字.

所以....

计算变量:有没有办法观察基础变量并自动更新计算量？无需将我的程序逻辑埋在我的HTML中？

有没有一种好方法可以防止我的数字变成字符串？

谢谢您的帮助.

仅供参考,也发布到Google网上论坛:https://groups.google.com/forum/#!topic / angular/ 0dfnDTaj8tw

Answer 1

对于计算字段,请向控制器添加方法...

$scope.cost = function() { return $scope.val1 + $scope.val2 };

然后直接绑定到它.当它的组成值发生变化时,它将知道何时需要重新计算.

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

Answer 2

好,

几个小时后,我想我有答案.

使用$ scope.$ watch.

$scope.$watch('(height * width) * 40', function(v) {$scope.cost = v;});

要么

$scope.$watch('height + width', function() {$scope.cost = (Number(height) * Number(width)) * 40;});

这会自动更新监视变量的所有可计算项.它让我有一种方法来处理这些,而不必住在大括号内.

此外,可以重复使用和跟踪计算值以进行级联更新:

$scope.$watch('height * width', function(v) {$scope.dim = v;});
$scope.$watch('dim * 40', function(v) {$scope.cost = v;});

因此,如果高度和/或宽度发生变化,则更新dim,并且由于昏暗已更改,因此会更新成本.

Answer 3

我将你的第三个输入更改为:

<input type="text" value="{{val1 * 1 + val2}}" />

这会导致Angular.js将值视为数字,而不是字符串.

这是小提琴.我从这里收集了答案.