Angular options for single select menu with child select2.js tag menu

Question

Ok I've decided to post since I've just about confused myself enough with this and I've got a deadline.

Oh, and fyi, I've read these pages (among many others): http://docs.angularjs.org/api/ng.directive:select How do I set the value property in AngularJS' ng-options?

And I've made a couple jsfiddle versions making one half or the other of this, but nothing that was able to fully complete.

So, within a dialog window I have a form which will have couple select menus (don't worry bout the dialog, it's a whole bunch of other stuff that makes this even harder to understand and it will only complicate this).

I've got a model with a data value that looks like this:

   $scope.events = [{
      "name":"Escape The Cape",
      "tag":"EscapeCape",
      "playlists":[{
            "name":"Run Course Preview",
            "tag":"RunCoursePreview"
      }]
   }, {
      "name":"Wildwood Triathlon",
      "tag":"WildwoodTriathlon",
      "playlists":[{
            "name":"Bike Course Preview",
            "tag":"BikeCoursePreview"
         }, {
            "name":"Race Announcements",
            "tag":"RaceAnnouncements"
     }]
}];

What I need to do is to show an initial select menu in angular, that allows you to select an event name [Escape The Cape, Wildwood Triathlon] and the values in that select menu are the tag properties which match the names.

Once you select an option from that menu, a second menu will show based on the now existing event value eg: ng-show="event".

The second menu is a select2.js multiple selection menu which allows you to select one or more playlists of the selected event. Not any other playlists. Not group by either, no need to do group by in ng-options. I wish it were that easy.

So, then, I need to be able to add another event, and repeat etc.

The events will be bound to an array $scope.selectedEvents = [] for example.

Here is the HTML I've come up with this far, but I'm so stuck it's just making me annoyed at this point.

    <div class="control-group">
        <label class="control-label">Events</label>
        <div id="event-template">
            <div class="controls events">
                <select class="events-menu input-xlarge" ng-model="file.events" ng-options="obj.tag as obj.name for obj in events"></select>
            </div>
            <div class="controls playlists">
                <select name="playlist" class="playlist-menu input-xlarge select2" multiple="multiple" ng-options="event as "></select>
            </div>
        </div>
        <a href class="add-event" ng-click="addEvent()">
            <span>Add Event</span>
        </a>
    </div>

Some jsfiddles that I found and used for playing around trying to do this but go no where. http://jsfiddle.net/jaredwilli/AUPYP/ http://jsfiddle.net/jaredwilli/bjs3g/ http://jsfiddle.net/jaredwilli/7jZXZ/1/

Any insight as to how to do the ng-options query in the select menu attribute for the combo box pain in my ass I'd be very greatful.

Thanks Jared

Answer 1

I did not fully understand your question. But if you are trying to populate the second dropdown based on the first one then you can as below:

As a first step, I converted your events model from a list to a hash. This makes accessing the contents quite easy:

$scope.events = {
    "EscapeCape":{
        "name":"Escape The Cape",       
        "playlists":[
            {
                "name":"Run Course Preview",
                "tag":"RunCoursePreview"
            }
        ]
    }, 
    "WildwoodTriathlon":{
        "name":"Wildwood Triathlon",      
        "playlists":[
            {
                "name":"Bike Course Preview",
                "tag":"BikeCoursePreview"
            }, 
            {
                "name":"Race Announcements",
                "tag":"RaceAnnouncements"
            }
        ]
    }
}

Now in the HTML, you can do as follows:

<select ng-model="file.events" ng-options="key as value.name 
    for (key,value) in events"></select>

<select ng-model="file.playlist" multiple="multiple" 
    ng-options="playlist.tag as playlist.name 
    for playlist in events[file['events']].playlists"></select>