わかりました、これで十分に混乱していて、締め切りがあるので、投稿することにしました。
ああ、参考までに、私はこれらのページを (他の多くのページの中でも) 読みました: http://docs.angularjs.org/api/ng.directive:select AngularJS の ng-options で value プロパティを設定するにはどうすればよいですか?
そして、これの半分またはもう一方を作成する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] を選択できます。その選択メニューの値は、名前に一致するタグ プロパティです。
そのメニューからオプションを選択すると、現在存在するイベント値に基づいて 2 番目のメニューが表示されます (例: ng-show="event")。
2 番目のメニューは select2.js の複数選択メニューで、選択したイベントの 1 つまたは複数のプレイリストを選択できます。他のプレイリストではありません。どちらもグループ化しないでください。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 クエリを実行する方法についての洞察は、私は非常に素晴らしいです.
ありがとうジャレッド