Angularjs et cliquez sur afficher dans une liste
-
29-10-2019 - |
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?
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