Angularjs kliknij i wyświetl z listy

Chcę utworzyć prostą listę, a gdy użytkownik kliknie przycisk, wartość jest wyświetlana w elemencie span.Angularjs kliknij i wyświetl z listy

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>

Chcę dynamicznie wyświetlić listę piosenek klikniętego artysty. Czy to właściwe podejście?

Źródło

2012-02-22 rascio

Problem polega na tym, że ng:repeat tworzy nowy zakres, więc ustawiasz bieżący zakres w zakresie selected, ale zakres jest powiązany z zakresem rodzica.

Istnieje wiele rozwiązań, określających metodę prawdopodobnie najlepsze:

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

i kontroler:

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

tutaj jest przykład pracy na jsfiddle: http://jsfiddle.net/vojtajina/ugnkH/2/

Źródło

2012-02-22 18:51:24 Vojta

czy istnieje sposób zrobić to bez tworzenia metody w kontrolerze? – rascio

Tak, możesz, ale to rozwiązanie z metodą kontrolera jest IMHO najlepsze. Oto skrzypce z dwoma innymi rozwiązaniami http://jsfiddle.net/vojtajina/ugnkH/3/ – Vojta

ok ... ostatnią rzeczą, aby zobaczyć, czy to rozumiem. W moim pliku nie działało, ponieważ nie zadeklarowałem "wybranej" właściwości w moim modelu i tworzyłem ją w zakresie iteracji. W trzecim przykładzie działa, ponieważ jeśli nie odnajdzie właściwości w "rzeczywistym" zakresie, przeszukuje zakresy nadrzędne przed utworzeniem? – rascio

Angularjs kliknij i wyświetl z listy

Odpowiedz

Powiązane problemy