Databases
StackOverflow2013
Postsdbo
PONew to Angular - Computed Variables
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PONew to Angular - Computed Variables
    primarykey
    data
    text
    <p>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.</p> <p><a href="http://jsfiddle.net/LostInDaJungle/BxELP/">http://jsfiddle.net/LostInDaJungle/BxELP/</a></p> <pre><code>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. </code></pre> <p>Here is a very basic fiddle that outlines two of my major problems...</p> <p>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?</p> <p>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.</p> <p>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.</p> <p><a href="http://jsfiddle.net/LostInDaJungle/QNVwe/">http://jsfiddle.net/LostInDaJungle/QNVwe/</a></p> <p>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.</p> <p>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.</p> <p>Here's a knockout version of the same:</p> <p><a href="http://jsfiddle.net/LostInDaJungle/eka4S/2/">http://jsfiddle.net/LostInDaJungle/eka4S/2/</a></p> <p>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.</p> <p>So....</p> <p>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?</p> <p>Is there a good way to keep my numbers from turning into strings?</p> <p>Thank you for your help.</p> <p>FYI, also posted to Google Groups: <a href="https://groups.google.com/forum/#!topic/angular/0dfnDTaj8tw">https://groups.google.com/forum/#!topic/angular/0dfnDTaj8tw</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJason Maggard
    1. USJason Maggard
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PONew to Angular - Computed Variables
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PONew to Angular - Computed Variables
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload