mardi 28 juin 2016

How to set form input values inside an ng-repeat?


I have an ng-repeat that's getting songs from Spotify. For each song in the ng-repeat, I want a form where the input value is pre-populated based on the information from the song.

Here is my view:

<div ng-repeat="song in spotifyResults">
    <h1>{{song.name}}<h1>
    <h2>Artist: {{song.artists[0].name}}</h2>      
    <h3>Album: {{song.album.name}}</h3> 
    <h4>{{song.id}}</h4>
    <iframe ng-src="{{getIframeSrc(song.id) | trusted}}" width="100%" height="50%" frameborder="0" allowtransparency="true"></iframe>

    <form class="form" name="form" ng-submit="selection.addSong(songName)" novalidate>
    <div class="form-group">
        <label>Name</label>
        <input type="text" value="{{song.name}}" name="songName" class="form-control" ng-model="songName" required/>
    </div>
    <button class="btn btn-primary">Save Song</button>
   </form>
<hr>
</div>

I can successfuly set the placeholder of the input using the expressions inside the repeat like so:

placeholder="{{song.name}}"

But I can't seem to set the value of the input like this:

value="{{song.name}}"

If i try and submit the form with the value set using an expression, the songName argument passed into the ng-submit function is undefined.

How can I set default form input values inside an ng-repeat?


Aucun commentaire:

Enregistrer un commentaire