web-dev-qa-db-fra.com

AngularJS affiche la liste d'un tableau

J'ai un contrôleur qui retourne un tableau, j'essaie d'afficher chaque élément de ce tableau sous forme de liste.

Ce que je tente de faire, ce qui ne fonctionne pas:

<li ng-repeat="Name in names">
    <a ng-controller="PostsCtrl" href="#">{{response.text}}</a>
</li>

response.text retourne un tableau du contrôleur.

Je me demande également quelle est la valeur de l'attribut ng-repeat censé être, une chaîne unique?

Je vous remercie!

javascriptarraysangularjslistangularjs-ng-repeat
6
Abushawish

Définissez le tableau dans votre contrôleur avec la variable $ scope: 

app.controller('PostsCtrl', function($scope) {
    $scope.response = { text: ['hello', 'world'] };
}

Ensuite, utilisez ng-repeat sur VARIABLE, pas sur le contrôleur.

<div ng-controller="PostsCtrl">
    <ul>
        <li ng-repeat="name in response.text"><a href="#">{{name}}</a></li>
    </ul>
</div>

Le contrôleur est uniquement utilisé pour définir les variables $ scope que vous pouvez utiliser dans cette section et n'est pas utilisé comme variable elle-même.

13
tcase360

ngRepeat est fondamentalement semblable à une boucle for. Il n'y a pas de valeur par défaut, il vous suffit de lui donner les données que vous souhaitez parcourir. Ainsi, lorsque vous faites un ng-repeat="name in names", cela revient à faire quelque chose comme for(var name in names){} en javascript simple. Pour que cela fonctionne correctement, vous devez transmettre ces données au modèle via votre $scope, en tant que tel:

var myApp = angular.module('myApp', []);

myApp.controller('PostsCtrl', ['$scope', function($scope){
    // Here the array would be your response.text:
    $scope.names = ['John', 'Jessie', 'Johanna', 'Joy', 'Mary', 'Peter', 'Sebastian', 'Erika', 'Patrick', 'Samantha'];

}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="PostsCtrl">
        I have {{names.length}} friends. They are:
        <ul>
          <li ng-repeat="name in names">
            [{{$index + 1}}] {{name}}.
          </li>
        </ul>
    </div>
</div>

Pour en savoir plus, consultez la page: https://docs.angularjs.org/api/ng/directive/ngRepeat

2
Gerson Goulart

Vous avez probablement votre contrôleur sur le mauvais attribut, sauf si vous voulez un nouveau contrôleur pour chaque élément du tableau.

Le deuxième problème, "response.text renvoie un tableau à partir du contrôleur". Alors, est-ce le tableau que vous voulez répéter?

<div ng-controller="PostsCtrl">
  <li ng-repeat="item in response.text">
      <a href="#">{{item}}</a>
  </li>
</div>

Et puis la troisième question, quelle est la valeur supposée de l'attribut ng-repeat: c'est censé être la valeur de tout tableau valide sur votre $scope ou viewModel. Donc, response.text serait un élément valide pour placer le ng-repeat puisqu'il s'agit d'un tableau. Comme je l'ai indiqué ci-dessus, vous avez maintenant un objet item pour chaque élément de reponse.text. Si cela est aussi bas que vous le souhaitez, vous pouvez simplement imprimer {{item}} - si item a des propriétés, vous pouvez faire quelque chose comme, par exemple, {{item.someProperty}}

1
Tom