Параметры Angular для меню с одним выбором с дочерним меню тега select2.js

Хорошо, я решил опубликовать, так как я уже достаточно запутался в этом, и у меня есть крайний срок.

О, и, кстати, я прочитал эти страницы (среди многих других): http://docs.angularjs.org/api/ng.directive:select Как установить свойство value в ng-options AngularJS?

И я сделал пару версий jsfiddle, делающих одну половину или другую из этого, но ничего из того, что можно было бы завершить.

Итак, в диалоговом окне у меня есть форма, которая будет иметь несколько меню выбора (не беспокойтесь о диалоге, это целая куча других вещей, которые делают это еще труднее для понимания и только усложняют это).

У меня есть модель со значением данных, которое выглядит так:

   $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"
     }]
}];

Что мне нужно сделать, так это показать начальное меню выбора в angular, которое позволяет вам выбрать имя события [Escape The Cape, Wildwood Triathlon], а значения в этом меню выбора являются свойствами тега, которые соответствуют именам.

После того, как вы выберете опцию из этого меню, появится второе меню на основе уже существующего значения события, например: ng-show = "event".

Второе меню - это меню множественного выбора select2.js, которое позволяет вам выбрать один или несколько плейлистов для выбранного события. Никаких других плейлистов. Также не группировать по, нет необходимости делать группировку по в ng-options. Я бы хотел, чтобы это было так просто.

Итак, мне нужно добавить еще одно событие, повторить и т. Д.

Например, события будут привязаны к массиву $ scope.selectedEvents = [].

Вот HTML, который я придумал так далеко, но я так застрял, что меня это просто раздражает.

    <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>

Некоторые jsfiddles, которые я нашел и использовал, чтобы поиграть, пытаясь сделать это, но никуда не денусь. http://jsfiddle.net/jaredwilli/AUPYP/ http://jsfiddle.net/jaredwilli/bjs3g/ http://jsfiddle.net/jaredwilli/7jZXZ/1/

Любое понимание того, как выполнить запрос ng-options в атрибуте меню выбора для боли в поле со списком в моей заднице, было бы очень полезно.

Спасибо Джаред


angularjs jquery-select2 ng-options select-menu
person jaredwilli    schedule 14.08.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я не совсем понял ваш вопрос. Но если вы пытаетесь заполнить второй раскрывающийся список на основе первого, вы можете, как показано ниже:

В качестве первого шага я преобразовал вашу events модель из списка в хэш. Это упрощает доступ к содержимому:

$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"
            }
        ]
    }
}

Теперь в HTML вы можете сделать следующее:

<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>
person AlwaysALearner    schedule 14.08.2013
comment
Это сработает, но я не могу изменить структуру данных, чтобы она соответствовала тому, как вы ее здесь настроили. Я надеялся найти способ сделать это с помощью имеющейся у меня структуры данных или чего-то подобного. - person jaredwilli; 14.08.2013