Complicated ng-repeat / ng-options

45 views
Skip to first unread message

Dave Abbott

unread,
Sep 27, 2015, 1:09:09 PM9/27/15
to AngularJS
I have a table that contains a tree structure in the back-end non angular related, but It has categories (id) and sub-categories (parent_id) so It looks like

Colors
- Red
- Blue
- Green
- ...

Fabric
- Cotton
- Silk
- Wool

Style
- Modern
- Retro

So on... very simple,

Now each when spit out into the form are done in sections so if user clicks Colors all the color options are repeated only with a select drop down,
but here is the tricky part, each option (Red, Blue, Green) has a drop down to select importance values 1 thru 5 So there is a join table in the database that holds id, user_id, category_id, importance_id

So I need to do a dual repeat thru the category options and data at the same time. 1 to display all the available options, then repeat thru a formData array to mark the ones already selected with values

I have the options being displayed with the drop downs but can't figure out how to display the data they selected. This is coming from an existing database so there are records saved.

I have in the view

<div data-ng-repeat="options in data.options">
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                                <div class="form-group">
                                  <label>{{ option.name }}:</label>
                                  <select id=" {{ option.id }} " type="text" class="form-control" ng-model="???" ng-value="{{ option.id }}" ng-options="key as value for (key , value) in data.importance"/>
                                  </select>
                                </div>
                               
                            </div>
                        </div>

I have 2 arrays 1 with the options to select from and a formData array which holds the values from the database of the selected.

Any ideas how to accomplish this or tips to get started?

Thanks,

Dave


Sander Elias

unread,
Sep 28, 2015, 9:25:17 AM9/28/15
to AngularJS
Hi Dave,

This is a small thing, I can build you a sample on a way on how to solve this.
the extra ng-form is so it's easier to handle validation. I added an second object to retreive the result of the selects, but of coarse, you can use the originating obj as well. I prefer to use a separate res(ult) object in the kind of construct, makes it way easier to reason about the data, and the results.

If you have questions about the sample, just ask them!

Regards
Sander



Reply all
Reply to author
Forward
0 new messages