Angularjs Bir listeden tıklayın ve tıklayın

Basit bir liste oluşturmak istiyorum ve kullanıcı bir düğmeye tıkladığında değer bir span öğesinde görüntülenir.Angularjs Bir listeden tıklayın ve tıklayın

HTML & Denetleyici Dinamik tıklanan sanatçının şarkıların listesini görüntülemek isteyen

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

. Bu doğru bir yaklaşım mı?

kaynak

2012-02-22 rascio

Sorun şu ki, ng:repeat yeni kapsam oluşturuyor, bu nedenle geçerli kapsamda selected ayarlıyorsunuz, ancak aralık bir ana kapsamla ilişkilendiriliyor.

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

Ve kontrolör: Burada

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

senin örneğin jsfiddle üzerinde çalışıyor: http://jsfiddle.net/vojtajina/ugnkH/2/

kaynak

2012-02-22 18:51:24 Vojta

bir yolu vardır

muhtemelen en iyi bir yöntem tanımlayan birden çözümler vardır denetleyicide bir yöntem oluşturmadan bunu yapmak için? – rascio

Evet, yapabilirsin, ama bu çözüm kontrol yöntemiyle IMHO en iyisidir. Burada iki çözüm ile keman var http://jsfiddle.net/vojtajina/ugnkH/3/ – Vojta

Tamam ... son şey sadece anladım eğer görmek için. Dosyamda çalışmıyordu çünkü modelimde "seçili" özelliği bildirmedim ve yineleme kapsamında bunu oluşturuyordu. Üçüncü örneğinizde çalışırken, "gerçek" kapsamda özelliği bulamazsa, oluşturmadan önce üst kapsamları araştırır. – rascio

Angularjs Bir listeden tıklayın ve tıklayın

cevap

İlgili konular