Angularjs clicca e mostra da un elenco

Voglio creare un elenco semplice e quando l'utente fa clic su un pulsante il valore viene visualizzato in un elemento span.Angularjs clicca e mostra da un elenco

HTML & controller

<html xmlns:ng="http://angularjs.org"> 
<script src="http://code.angularjs.org/angular-0.9.19.js" ng:autobind></script> 
<script type="text/javascript"> 
function MyController(){ 
    this.list = [{name:"Beatles", songs: ["Yellow Submarine", "Helter Skelter", "Lucy in the Sky with Diamonds"]}, {name:"Rolling Stones", songs:["Ruby Tuesday", "Satisfaction", "Jumpin' Jack Flash"] }] 

    this.songs = []; 

} 
</script> 
<body ng:controller="MyController"> 
<p>selected: <span ng:bind="selected" ng:init="selected='none'" /></p> 
    <ul> 
     <li ng:repeat="artist in list"> 
      <button ng:click="selected = artist.name" >{{artist.name}}</button> 
     </li> 
    </ul> 
    <!--ol> 
     <li ng:repeat="song in songs"> 
      {{song}} 
     </li> 
    </ol--> 
</body>

voglio visualizzare in modo dinamico l'elenco delle canzoni dell'artista cliccato. È questo l'approccio giusto?

fonte

2012-02-22 rascio

Il problema è, che ng:repeat crea nuovo ambito, in modo che si sta configurando selected portata attuale, ma la durata è legato a un ambito genitore.

ci sono molteplici soluzioni, definendo un metodo probabilmente il migliore:

<div ng:controller="MyController"> 
<p>selected: {{selected.name}}</p> 
    <ul> 
    <li ng:repeat="artist in list"> 
     <button ng:click="select(artist)" >{{artist.name}}</button> 
    </li> 
    </ul> 
</div>

E il controllore:

function MyController() { 
    var scope = this; 

    scope.select = function(artist) { 
    scope.selected = artist; 
    }; 

    scope.list = [{ 
    name: "Beatles", 
    songs: ["Yellow Submarine", "Helter Skelter", "Lucy in the Sky with Diamonds"] 
    }, { 
    name: "Rolling Stones", 
    songs: ["Ruby Tuesday", "Satisfaction", "Jumpin' Jack Flash"] 
    }]; 
}

Ecco il vostro esempio lavorando su jsfiddle: http://jsfiddle.net/vojtajina/ugnkH/2/

fonte

2012-02-22 18:51:24 Vojta

c'è un modo per farlo senza creare un metodo nel controller? – rascio

Sì, è possibile, ma questa soluzione con il metodo controller è IMHO la migliore. Ecco qui il trucco con altre due soluzioni http://jsfiddle.net/vojtajina/ugnkH/3/ – Vojta

ok ... come ultima cosa solo per vedere se ho capito. Nel mio file non funzionava perché non ho dichiarato la proprietà "selezionata" nel mio modello, e lo stava creando nell'ambito dell'iterazione. Mentre nel tuo terzo esempio funziona perché se non trova la proprietà nell'ambito "effettivo" cerca negli ambiti genitore prima di crearlo? – rascio

Angularjs clicca e mostra da un elenco

risposta

Problemi correlati