Angular的新手-计算变量 [英] New to Angular - Computed Variables

问题描述

我正在从淘汰赛迁移到Angular，但遇到了一些问题.我以为我必须做某种非角度的方式.

I am moving to Angular from Knockout, and I have a few issues. I'm assuming that I must be doing something a non-angular type of way.

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.

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

Here is a very basic fiddle that outlines two of my major problems...

问题1:val1和val2分别初始化为3和4，并正确加起来为7.但是，如果您更改文本框中的任何一个值，则新值将被视为字符串，并且会串联而不是加法.将val1更改为4，然后将其设置为8，则得到44.解决此问题的最佳方法是什么?

Problem 1: val1 and val2 are initialized as 3 and 4, and add up to 7 properly. However, if you change either of the values in the text boxes, the new value is treated as a string and I get concatenation instead of addition. Change val1 to 4 and you get 44 when it should be 8. What is the best way around this behaviour?

问题2:计算字段.我可以使用{{val1 + val2}}之类的大括号来获得计算字段，并且当基础模型发生更改时，使计算字段自动更新，但这是完全不能接受的.在我成熟的应用程序中，我们生成了一个成本"，该成本在整个过程中已被多次使用，并且每次都必须进行成本计算，这很痛苦.更不用说当此计算发生变化时，我现在的任务是找到15个使用成本计算的不同地点并将其全部更新的艰巨任务.

Problem 2: Calculated fields. I can get a calculated field by using the curly brackets like {{val1 + val2}} and have the calculated fields auto update when the underlying model changes, but this is totally unacceptable. In my full fledged app, we generate a "cost" that is used several times throughout and having to put in the cost calculation each and every time is a pain. Not to mention that when this calculation changes, I now have the unenviable task of finding 15 different places that use the cost calculation and updating them all.

此外，如果我尝试在输入中使用大括号将ng-model ="cost"放入，则大括号不起作用.因此，没有什么可以约束我了.

In addition, if I try to put an ng-model="cost" on the input with the curly brackets, then the curly brackets don't work. So nothing jumps out at me as a way to bind cost.

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

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

This example is more like the structure I desire. However, unlike a ko.observable, the calculated fields do not update when the values that generate them change. The boilerplate solution everyone has foisted on me is to write a bunch of ng-change handlers... But that is awful. If width changes change the cost and change the payback calculations, etc... It quickly becomes a tangled mess.

这两种方法都无法将逻辑与表示分离.方法一将我的业务逻辑嵌入到HTML中.方法二在我的代码中放置了一堆ng-change处理程序，这与必须以纯HTML编写一堆onChange处理程序没什么不同.如果我必须做一堆ng-change处理程序，我将尽快在Javascript中执行onChange处理程序，因为我至少可以在表示层之外声明它们.

Both of these methods fail as far as separating logic from presentation. Method one has my business logic embedded in my HTML. Method two puts a whole bunch of ng-change handlers in my code which isn't that much different from having to write a whole mess of onChange handlers in plain ol' HTML. If I HAVE to do a bunch of ng-change handlers, I would just as soon do an onChange handler in Javascript because I can at least declare them outside of my presentation layer.

这是相同版本的淘汰赛版本:

Here's a knockout version of the same:

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

这更像我所期望的...除了输入上的数据绑定外，所有程序逻辑都很好地包含在视图模型中.另外，由于我的可计算对象是Javascript函数，因此我不必费神思议如何确保我的两个值都是数字.

This is more like what I would expect... Nothing but data-binds on my inputs, all program logic nicely contained within the view model. Also, since my computable is a Javascript function, I don't have to scratch my head about how to ensure my two values are numeric.

所以......

计算变量:是否可以观察基础变量并自动更新计算量?不必将程序逻辑隐藏在HTML中?

Computed variables: Is there a way to watch the underlying variables and update the computed amount automatically? Without having to bury my program logic in my HTML?

有什么好方法可以防止我的数字变成字符串?

Is there a good way to keep my numbers from turning into strings?

谢谢您的帮助.

FYI，也发布到Google网上论坛: https://groups.google.com/forum/# ！topic/angular/0dfnDTaj8tw

FYI, also posted to Google Groups: https://groups.google.com/forum/#!topic/angular/0dfnDTaj8tw

推荐答案

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

For a calculated field, add a method to your controller . . .

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

，然后直接绑定到它.它会知道何时需要重新计算其组成值.

and then bind to it directly. It will know when it needs to recalculate as its constituent values change.

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

这篇关于Angular的新手-计算变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！