Angularjs एक सूची से क्लिक करें और प्रदर्शित करें

मैं एक साधारण सूची बनाना चाहता हूं और जब उपयोगकर्ता बटन पर क्लिक करता है तो मान एक अवधि तत्व में प्रदर्शित होता है।Angularjs एक सूची से क्लिक करें और प्रदर्शित करें

एचटीएमएल & नियंत्रक

<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

हां, आप कर सकते हैं, लेकिन नियंत्रक विधि के साथ यह समाधान IMHO सर्वोत्तम है। यहां दो अन्य समाधानों के साथ बेवकूफ़ है http://jsfiddle.net/vojtajina/ugnkH/3/ – Vojta

ठीक है ... आखिरी बात यह है कि यह देखने के लिए कि मुझे यह मिल रहा है या नहीं। मेरी फाइल में यह काम नहीं कर रहा था क्योंकि मैंने अपने मॉडल में "चयनित" संपत्ति घोषित नहीं की है, और यह इसे पुनरावृत्ति के दायरे में बना रहा था। जबकि आपके तीसरे उदाहरण में यह काम करता है क्योंकि अगर इसे "वास्तविक" दायरे में संपत्ति नहीं मिलती है तो यह इसे बनाने से पहले मूल स्कॉप्स पर खोज करती है? – rascio

Angularjs एक सूची से क्लिक करें और प्रदर्शित करें

उत्तर

संबंधित मुद्दे