带有子 select2.js 标记菜单的单选菜单的角度选项

Question

好吧，我已经决定发帖了，因为我对此感到很困惑，而且我有一个截止日期。

哦，仅供参考，我已经阅读了这些页面（以及许多其他页面）： http://docs.angularjs.org/api/ng.directive:select How do I set the value property in AngularJS' ng-options?

我已经制作了几个 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"
     }]
}];

我需要做的是以角度显示初始选择菜单，它允许您选择事件名称 [Escape The Cape, Wildwood Triathlon]，该选择菜单中的值是与名称匹配的标签属性。

从该菜单中选择一个选项后，将根据现有的事件值显示第二个菜单，例如：ng-show="event"。

第二个菜单是一个 select2.js 多选菜单，允许您选择所选事件的一个或多个播放列表。不是任何其他播放列表。也不是 group by，也不需要在 ng-options 中进行 group by。我希望这很容易。

那么，我需要能够添加另一个事件，并重复等等。

例如，事件将绑定到数组 $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 查询以解决组合框问题的任何见解，我都会非常感激。

谢谢 贾里德

Answer 1

我没有完全理解你的问题。但是，如果您尝试根据第一个下拉列表填充第二个下拉列表，则可以如下所示：

作为第一步，我将您的 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>