0

Here's my template, I am dynamically creating input elements to be used in a form. When I submit the form nothing is passed to the update() function designated on the submit element as nothing appears to bound to the scope. I have tried track by id, $index and whatnot. The user input choices should be saved as an array property on the item object.

Is creating elements with nested ng-repeats like this possible in Angular or should I be looking at some additional library like formly etc.

   <div data-ng-controller="ViewTemplateController">
    <form novalidate>
    <ul>
    <li data-ng-repeat="optionCat in templateData.optionCats track by optionCat._id">
    <h3>{{optionCat.text}}</h3>
        <ul>
            <li data-ng-repeat="option in optionCat.optionz track by option._id">

            <label><h4>{{option.text}} This is a sample</h4></label>
            <input ng-if="(option.typeOf.indexOf('textBox')>-1)" type="text"  ng-model="item.col[$index].textInput" /> 

            <select ng-if="(option.typeOf.indexOf('dropDown')>-1)">
                <option  ng-model="item.col[$index].value_id" ng-repeat="value in option.valueList track by value._id" value="{{value._id}}">
                    {{value.text}}
                </option>
            </select> 

            </li>

        </ul>
    </li>
    </ul>

      <input type="submit" ng-click="update(item)" value="Save" />

      </form>
Avinash Jain
  • 7,200
  • 2
  • 26
  • 40
LaserBeak
  • 3,257
  • 10
  • 43
  • 73
  • your ng-click is outside the ng-repeat scope – Tarun Dugar Nov 21 '15 at 09:51
  • @TarunDugar And how can I possibly work around this without creating multiple submit buttons ? – LaserBeak Nov 21 '15 at 09:53
  • Where is "item" defined? What's it's scope? – Vi100 Nov 21 '15 at 10:01
  • One thing, what is 'item'. I just assumed optionCat and item are same. Am I right? – Tarun Dugar Nov 21 '15 at 10:03
  • @TarunDugar optionCat is an array property on a JSON object I pull from the server side. I then iterate over this array property using ng-repeat and create elements in accordance to the data found in this array and its nested objects. – LaserBeak Nov 21 '15 at 10:06
  • @Vi100 scope would be setup by including ng-model attribute on the elements. ng-model="item.col[$index].value_id" As I understand I don't necessarily need to explicitly declare it in the controller. – LaserBeak Nov 21 '15 at 10:07
  • What is item in 'ng-click="update(item)"' – Tarun Dugar Nov 21 '15 at 10:07
  • @TarunDugar As per this angular example: http://plnkr.co/edit/06hqkJpheKc8VZGiwbFW?p=preview I expect angular to create the object 'item' for me from reading the ng-model directive such as item.name that would be on html elements. – LaserBeak Nov 21 '15 at 10:15
  • And that's the problem: Angular creates the object `item`, but it does so in the current scope. I.e. for every option an separate `item` is created. The `ViewTemplateController`'s scope doesn't have any `item`. – a better oliver Nov 21 '15 at 10:53

1 Answers1

0

you have to bind it like ng-model="option.textInput" not like ng-model="item.col[$index].textInput" (i am assuming item is your controller). I mean property that you are binding should be part of 'option'.

Complete line

<input ng-if="(option.typeOf.indexOf('textBox')>-1)" type="text"  ng-model="option.textInput" />
Avinash Jain
  • 7,200
  • 2
  • 26
  • 40
  • And if there are many option.textInput that had been created from from some data. How do I give them unique scope model ? – LaserBeak Nov 21 '15 at 10:11
  • you are already keeping it in ng-repeat.. the angular will bind the changes to correct scope.. you no need to explicitly use $index for that. – Avinash Jain Nov 21 '15 at 10:15
  • If I just specify ng-model="option.textInput" then this will also be on all the other text inputs that will generated by the ng-repeat, and I can have many text inputs in one ng-repeat scope. So it doesn't work, since they all then refer to this same model property and each overwrite it. I need it to bind to objects in an array, such as option.col[1].textInput and this works when done manually, however I can't figure out how to create those indexes/numbering to reference the array, $index doesn't appear to work. – LaserBeak Nov 21 '15 at 21:29