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 2012-02-24 15:38:23

是的，你可以，但這種解決方案與控制器方法是恕我直言最好的。這裏是與另外兩個解決方案小提琴http://jsfiddle.net/vojtajina/ugnkH/3/ – Vojta 2012-02-26 01:13:43

好吧......作爲最後一件事情，看看我是否得到它。在我的文件中，它沒有工作，因爲我沒有在模型中聲明「selected」屬性，而是在迭代範圍內創建它。而在你的第三個例子中，它的工作原理是因爲如果它沒有在「實際」範圍中找到屬性，那麼在創建它之前它會搜索父範圍？ – rascio 2012-02-27 14:24:10

Angularjs單擊並從列表中顯示

回答

相關問題