1

AngularJS では、select 要素から選択されたオプションを取得してページの別の場所に配置するにはどうすればよいですか?

<div class="modal-body">
    <form class="">
        <div class="control-group">
            <label class="control-label" for="role">Choose a Playlist</label>
            <div class="controls">
                <select name="playlist">
                    <option ng-repeat="playlist in playlists | orderBy: 'playlist'" value="{{playlist.id}}">{{ playlist.name }}</option>
                </select>
            </div>
        </div>
        <p>
            Or,
            <a class="branded" href="#">Create New Playlist</a>
        </p>
    </form>
</div>
<div class="modal-footer">
    <button class="btn btn-branded" ng-click="postSongToPlaylist();">Save</button>
</div>

ユーザーがselect要素で選択したオプションを取得し、それを ng-click のパラメーターとして配置したいと考えています。どのオプションが適切かを Angular に「認識」させるにはどうすればよいですか?

4

1 に答える 1

3

ng-model値は、selectタグに付けた名前としてスコープに保存されます。

<div class="modal-body">
    <form class="">
        <div class="control-group">
            <label class="control-label" for="role">Choose a Playlist</label>
            <div class="controls">
                <select name="playlist" ng-model="playlist" ng-options="playlist.id as playlist.name for playlist in playlists | orderBy: 'playlist'">
                </select>
            </div>
        </div>
        <p>
            Or,
            <a class="branded" href="#">Create New Playlist</a>
        </p>
    </form>
</div>
<div class="modal-footer">
    <button class="btn btn-branded" ng-click="postSongToPlaylist(playlist);">Save</button>
</div>

また、オプション タグを入力する代わりにng-optionsを使用することをお勧めします。ng-repeat

于 2013-09-20T16:54:16.537 に答える