0

Im building a cart. Each product has "addons" these for example

  • size:big
  • dressing: No salad dressing
  • Drink: cola

these "addons" are from the database. and returned from the API as objects.

object looks like this: object cat_addons (addon_group) -object (addon) -object - etc object item addons (addon_group) -object (addon) -object - etc

now im making the "form" wich shows the select boxes and stuff and a "add" button. Now when the user clicks OK/add i want all selected values so i can further process it... but now i have no clue anymore to to this, because the ng-model has to be variable because its created in a repeat.

so im searching for a option to get all selected values form a (multi) ng-repeat populated form how can i do that?

view:

<form ng-submit="addItemToCart()">
    <!-- ADDONS -->
    <!-- CAT ADDONS -->
    <div ng-if="cat_addons">
        <div ng-repeat="(k, addon_group) in cat_addons">
            {{addon_group.addon_group_name}}
            <!-- SINGLE OPTION-->
            <div ng-if="addon_group.addon_option_type == 'single'">
            <span>
                <select ng-options="addon.addon_name as addon.addon_id for addon in addon_group.items">
                    <!-- SHOWS NOTHING? -->
                </select>
            </span>
            </div>
            <!-- SINGLE OPTION -->

            <!-- MULTI OPTION-->
            <div ng-if="addon_group.addon_option_type == 'multi'">
            <span ng-repeat="(k, addons) in addon_group.items">
                <input type="checkbox" name="{{addons.addon_id}}">{{addons.addon_name}}
            </span>
            </div>
            <!-- MULTI OPTION -->
        </div>
    </div>
    <!-- CAT ADDONS -->
    <!-- ADDONS -->
    <button type="submit">ok</button>
</form>

controller:

        $scope.addItemToCart = function() {
            //i have no clue...
        }
Reza
  • 880
  • 1
  • 10
  • 29

1 Answers1

0

I understand the urge to use ng-repeat once you discover what it's capable of. But there is a lot more to angular that makes things such as this issue much simpler. You might want to explore ngOptions directive (https://docs.angularjs.org/api/ng/directive/ngOptions) or the select tag (https://docs.angularjs.org/api/ng/directive/select).

If these are not what you're looking for, try and go through the documentation to explore angular. I'm sure you will enjoy it. If you are still stuck, comment on this answer and I'll help you out. I do know how to implement what you want using ng-repeat but it is not even close to the best way to do what you want to.

srthu
  • 197
  • 2
  • 14
  • see updated awnser, i did ng-options but it shows nothing? I also added screenshot of object – Reza May 30 '15 at 16:33
  • I see. Give me some time. I'll see what I can come up with. – srthu May 30 '15 at 16:40
  • Try adding ng-model to the select directive. I am not sure but that could be the reason. – srthu May 30 '15 at 17:01
  • i did, doenst work. You know.. im populating select boxes from the database... the only thing i need to do is to tget the values of all thes populated slelect boxes. The problem is that each select box needs a ngmodel but i can no popuplate vairable ngmodels, if I can do that i come al long way – Reza May 30 '15 at 17:05
  • no. each select box does not need an ng-model specified separately. When you use "addon.addon_name as addon.addon_id for addon in addon_group.items" it shows addon.addon_name as the option, sets addon.addon_id as the value for each option, and repeats addon in addon_group.items – srthu May 30 '15 at 17:17
  • and when you set ng-model="myVar", then $scope.myVar will be set to the addon.addon_id for the ID that has been selected. – srthu May 30 '15 at 17:23