I am using a mix of ASP.Net MVC and AngularJS in my Application, and am fairly new to both. For various reasons, I have decided to create a form using MVC and then load data and bind to the form elements using AngularJS.
There is a challenge with two items, that I kind of found a solution to, but not sure if it's optimal. I was eager to hear if there is a better way to do this.
In my AngularJS Controller, I have a Scope where a part looks like this:
{
(...)
Barriers: ['a', 'b', 'c', 'd', 'e'],
(...)
BarrierComments: [
{ BarrierGroup: 'x', Comment: 'Some text here' },
{ BarrierGroup: 'y', Comment: 'Some other text here' },
{ BarrierGroup: 'x', Comment: 'Some third text here' }
]
(...)
}
Now, in the generated form, I have two items that I'd like to bind: 1) CheckBoxes that should bind and add/remove items from the Barriers array 2) TextAreas that should each edit the Comment inside the BarrierComments
(I know this could be easier done with using ng-repeat, or maybe by changing the model a bit. However, my world is a bit more complex, and I still want to find the best solution)
At the MVC part, I generate checkboxes like this:
<input type="checkbox" ng-checked="Barriers.indexOf('a') > -1" ng-click="toggleBarrier('a')" />
(The toggleBarrier function will add or remove an item from the Barrier array)
TextAreas are generated like this:
<textarea ng-model="(BarrierComments | filter:{BarrierGroup:'x'})[0].Comment"></textarea>
Note that a...e and x...z are in fact Guids, just shortened for readability. These are also being configured in a database, so they are not fixed values.
My question is: Is there a more elegant way to make the Controls bind to this data? I am particulary unhappy With the TextArea which will fail if my model is missing an item in the BarrierComments array...
