I am facing a challenge with a form that has complex functionality such as drag-and-drop, deleting groups of elements, and adding groups of elements. I want to leverage Angular for this task. The form is already rendered with original values set.
<form>
<div>
<input ng-model="rule[0].rule" value="bar">
<select ng-model="rule[0].value">
<option>A</option>
<option selected>B</option>
</select>
</div>
<div>
<input ng-model="rule[1].rule" value="foo">
<select ng-model="rule[1].value">
<option selected>1</option>
<option>2</option>
</select>
</div>
...
</form>
My issue lies in Angular nullifying these values and failing to create a rule array in the $scope. My goal is to generate an array of objects called rule based on the values in my template.
While I understand that my approach may not align perfectly with the MVC pattern due to data being provided by the template, I prefer to avoid extensive data parsing methods.
Thank you.