dynamic name attributes for forms that are created with ng-repeat

Question

Im using ng-repeat to get data. From that data i make select boxes like this:

  <div ng-show="catAddons">
    <div ng-repeat="group in catAddons">
      <h4 class="addonTitle">{{group.name}}</h4>
      <div ng-show="group.group_optiontype == 'single'">
        <select ng-model="addItem.singleAddonCat" ng-options="singleAddon as formattedLabel(singleAddon) for singleAddon in group.addons track by singleAddon.addon_id" name="singleAddonCat" class="form-control-wrapper col-xs-12 col-sm-12 col-lg-12">
           <option value="" ng-hide="singleAddonCat">Please Choose... </option>
        </select>
      </div>
    </div>
  </div>

This way there could be 10+ slelect boxes like this. But the problem is in the form "name" tag... because for some reason when they all have the same name and same model only one select box wil work. I tried making the names dynamix using dynamic name attributes for forms that are created with ng-repeat-{{group.id}} but when i post this it does not show the id, also the view does not work also......

how can i do this?

not sure if this helps: http://stackoverflow.com/questions/21455695/angularjs-dynamic-form-field-validation/21457121#21457121 — Khanh TO, Sep 07 '14 at 02:08

score 0 · Accepted Answer · answered Sep 07 '14 at 01:30

It might help to use ng-attr-*, in this case, ng-attr-id. For uniqueness, the $index property available inside of ng-repeat might help you.

A warning - there have been problems with how browsers implement select/options and creating them in a loop may cause you issues. The Angular team made ng-options as a workaround. I really recommend you use that instead.

dynamic name attributes for forms that are created with ng-repeat

1 Answers1