Angularjs haga clic y visualice desde una lista

Quiero crear una lista simple y cuando el usuario hace clic en un botón, el valor se muestra en un elemento span.Angularjs haga clic y visualice desde una lista

HTML & controlador

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

Quiero mostrar dinámicamente la lista de las canciones del artista se hace clic. ¿Es este el enfoque correcto?

Fuente

2012-02-22 rascio

El problema es que ng:repeat crea un nuevo ámbito, por lo que está configurando selected en el ámbito actual, pero el alcance está vinculado a un ámbito primario.

Existen múltiples soluciones, definiendo un método probablemente el mejor:

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

y el controlador:

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"] 
    }]; 
}

Aquí está su ejemplo de trabajo en jsFiddle: http://jsfiddle.net/vojtajina/ugnkH/2/

Fuente

2012-02-22 18:51:24 Vojta

hay una manera hacerlo sin crear un método en el controlador? – rascio

Sí, puedes, pero esta solución con el método del controlador es en mi humilde opinión la mejor. Aquí está el violín con otras dos soluciones http://jsfiddle.net/vojtajina/ugnkH/3/ – Vojta

bien ... como último para ver si lo consigo. En mi archivo no funcionaba porque no he declarado la propiedad "seleccionada" en mi modelo, y la estaba creando en el ámbito de la iteración. Mientras que en su tercer ejemplo funciona porque si no encuentra la propiedad en el ámbito "real", busca en los ámbitos principales antes de crearlo. – rascio

Angularjs haga clic y visualice desde una lista

Respuesta

Cuestiones relacionadas