angularjs - 在 AngularJS 中，如何将 select 中的选定选项设置为页面其他位置的参数？

Question

在 AngularJS 中，如何从选择元素中获取选定选项以将其放在页面上的其他位置？

<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 “知道”哪个选项是正确的？

Answer 1

该值将作为您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填充您的选项标签。