Angularjs et cliquez sur afficher dans une liste

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

Question

Je veux créer une liste simple, et lorsque l'utilisateur clique sur un bouton, la valeur est affichée dans un élément span.

HTML et Contrôleur

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

Je veux afficher dynamiquement la liste des chansons de l'cliqué artiste.Est-ce la bonne solution?

Était-ce utile?

La solution

Le problème, c'est que ng:repeat crée un nouveau champ d'application, de sorte que vous définissez selected dans le champ d'application actuel, mais la durée est lié à un parent.

Il y a plusieurs solutions, la définition d'une méthode probablement la meilleure:

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

Et le contrôleur:

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

Ici est votre exemple de travail sur jsfiddle: http://jsfiddle.net/vojtajina/ugnkH/2/

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top