I’m tackling learning a little AngularJS and have come across an issue that seems like it should have an easy resolution, but my searching of the docs and various forums are proving it’s either a little more complicated or I just don’t know the right terminology. Anyway, here’s the short of it. I want to bind to an arbitrary number of input fields and total their values (so I can, for example, display a running total of user inputted numbers). However, not only are the number of input fields arbitrary, but the fields themselves may have different names every time.
Specifically, my data backend is Django, and for various reasons the form itself must be generated by Django’s modelforms and then sent via an ajax call to the Angular front-end. I really want to avoid coupling too closely to each form (i.e. I don’t want to write an Angular function for each possible permutation of form that Django might send, but instead want a single one that knows how to select the proper things to bind to).
I do have control over the construction of the forms via Django, and have been attempting to figure out what Angular directives I need to inject, but as I’m still on my way up the learning curve any guidance would be greatly appreciated.
How about using javascript array?
You can make a form with
ng-modelthat refer to the array element.And
total()function to iterate though the array element and get the sum.It can support arbitrary number of input elements this way.
If it is only about input elements and total function, it satisfies the requirement.
http://plnkr.co/edit/ZJCQ2m