Angularjs нажмите и отобразите из списка

Я хочу создать простой список, и когда пользователь нажимает кнопку, значение отображается в элементе span.Angularjs нажмите и отобразите из списка

HTML & Контроллер

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

Я хочу, чтобы динамически отобразить список песен щелкнули художника. Правильно ли это?

источник

2012-02-22 rascio

Проблема заключается в том, что ng:repeat создает новую область видимости, поэтому вы устанавливаете selected в текущей области действия, но диапазон привязан к родительской области.

Есть несколько решений, определяющих способ, вероятно, лучше всего:

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

И контроллер:

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

Вот ваш пример работает на jsfiddle: http://jsfiddle.net/vojtajina/ugnkH/2/

источник

2012-02-22 18:51:24 Vojta

есть способ сделать это без создания метода в контроллере? – rascio

Да, вы можете, но это решение с контроллером - это ИМХО лучшее. Вот скрипка с двумя другими решениями http://jsfiddle.net/vojtajina/ugnkH/3/ – Vojta

ok ... как последняя вещь, чтобы увидеть, получу ли я ее. В моем файле он не работал, потому что я не объявлял свойство «selected» в моей модели и создавал его в рамках итерации. Хотя в третьем примере это работает, потому что, если он не находит свойство в «фактической» области, он ищет по родительским областям, прежде чем создавать его? – rascio

Angularjs нажмите и отобразите из списка

ответ

Смежные вопросы