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

好吧，我决定发帖了，因为我对这件事已经够迷惑的了，而且我还有一个最后期限

哦，仅供参考，我已经阅读了这些页面（其中包括许多其他页面）：

我已经制作了几个JSFIDLE版本，制作了其中的一半，但没有一个能够完全完成

因此，在一个对话框窗口中，我有一个表单，它将有两个选择菜单（不要担心对话框，这是一大堆其他的东西，使它更难理解，这只会使它复杂化）

我得到了一个数据值如下的模型：

   $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选项中执行分组。我希望它是那么容易

所以，然后，我需要能够添加另一个事件，并重复等等

这些事件将绑定到一个数组$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>

事件

我发现的一些JSfiddle，用于尝试这样做，但没有任何用处。

任何关于如何在“选择菜单”属性中为“我屁股痛”组合框执行ng选项查询的见解，我都会非常感谢

谢谢

---

杰瑞德

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

作为第一步，我将您的

事件

模型从列表转换为散列。这使得访问内容非常容易：

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

---

这会起作用，但我无法真正更改数据的结构以匹配您在此处的设置方式。我希望能找到一种方法，用我拥有的数据结构或类似的东西来实现它。