CODEWITHSUNDEEP
angularjs
trysis
trysis

Reputation: 8416

In AngularJS, how do I set the selected option from select as a parameter elsewhere on the page?

In AngularJS, how do I get the selected option from a select element to put it somewhere else on the page?

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

I want to get the option the user selects in the select element and put it as the parameter for the ng-click. How do I get Angular to "know" which option is the right one?

Upvotes: 1

Views: 1836

Answers (1)

Jonathan Palumbo
Jonathan Palumbo

Reputation: 6871

The value will be stored in the scope as the name you give to ng-model for the select tag.

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

I would also suggest that you use ng-options instead of ng-repeat to populate your option tags.

Upvotes: 3

Related Questions