Angularjs nhấp và hiển thị từ danh sách

Tôi muốn tạo danh sách đơn giản và khi người dùng nhấp vào nút, giá trị được hiển thị trong phần tử span.Angularjs nhấp và hiển thị từ danh sách

HTML & khiển

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

tôi muốn tự động hiển thị danh sách các bài hát của các nghệ sĩ nhấp vào. Đây có phải là cách tiếp cận đúng?

Nguồn

2012-02-22 rascio

Vấn đề là, ng:repeat tạo phạm vi mới, vì vậy, bạn đang đặt selected trong phạm vi hiện tại, nhưng khoảng thời gian được giới hạn trong phạm vi gốc.

Có nhiều giải pháp, việc xác định một phương pháp có lẽ là tốt nhất:

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

Và bộ điều khiển:

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

Dưới đây là ví dụ của bạn làm việc trên jsfiddle: http://jsfiddle.net/vojtajina/ugnkH/2/

Nguồn

2012-02-22 18:51:24 Vojta

là có một cách để làm điều đó mà không tạo ra một phương pháp trong bộ điều khiển? – rascio

Có, bạn có thể, nhưng giải pháp này với phương pháp điều khiển là IMHO tốt nhất. Đây là giải pháp với hai giải pháp khác http://jsfiddle.net/vojtajina/ugnkH/3/ – Vojta

ok ... như điều cuối cùng chỉ để xem tôi có nhận được nó hay không. Trong tệp của tôi, nó không hoạt động vì tôi đã không khai báo thuộc tính "đã chọn" trong mô hình của tôi, và nó đã tạo ra nó trong phạm vi của phép lặp. Trong khi trong ví dụ thứ ba của bạn nó hoạt động bởi vì nếu nó không tìm thấy tài sản trong phạm vi "thực tế" nó tìm kiếm trên phạm vi cha mẹ trước khi tạo ra nó? – rascio

Angularjs nhấp và hiển thị từ danh sách

Trả lời

Các vấn đề liên quan