Angularjs klicken und aus einer Liste anzeigen

StackOverflow https://stackoverflow.com/questions/9399239

Frage

Ich möchte eine einfache Liste erstellen. Wenn der Benutzer auf eine Schaltfläche klickt, wird der Wert in einem span-Element angezeigt.

HTML & Controller 

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

Ich möchte die Liste der Songs des angeklickten Künstlers dynamisch anzeigen.Ist das der richtige Ansatz?

War es hilfreich?

Lösung

Das Problem ist, dass ng:repeat einen neuen Bereich erstellt, sodass Sie selected im aktuellen Bereich festlegen, der Bereich jedoch an einen übergeordneten Bereich gebunden ist.

Es gibt mehrere Lösungen, die eine Methode definieren, die wahrscheinlich die beste ist: 

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

Und der Controller: 

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

Hier ist Ihr Beispiel für die Arbeit an jsfiddle: http://jsfiddle.net/vojtajina/ugnkH/2/

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top