wake-up-neo.com

AngularJS-Anzeigeliste aus einem Array

Ich habe einen Controller, der ein Array zurückgibt. Ich versuche, jedes Element dieses Arrays als Liste anzuzeigen.

Was ich versuche zu tun, was nicht funktioniert:

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

response.text gibt ein Array vom Controller zurück.

Ich frage mich auch, was der Wert des Attributs ng-repeat sein soll, eine eindeutige Zeichenfolge?

Vielen Dank!

6
Abushawish

Definieren Sie das Array in Ihrem Controller mit der Variablen $ scope: 

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

Verwenden Sie dann ng-repeat für die VARIABLE, nicht für den Controller.

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

Der Controller wird nur zum Definieren der $ scope-Variablen verwendet, die Sie in diesem Abschnitt verwenden können, und wird nicht als Variable selbst verwendet.

13
tcase360

ngRepeat ist im Grunde wie eine for-Schleife. Es gibt keinen Standardwert, Sie müssen nur die Daten angeben, die Sie durchlaufen möchten. Wenn Sie also einen ng-repeat="name in names" ausführen, ist dies ähnlich wie for(var name in names){} in einfachem Javascript. Damit es richtig funktioniert, müssen Sie diese Daten über Ihren $scope an die Vorlage übergeben:

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>

Weitere Informationen finden Sie unter: https://docs.angularjs.org/api/ng/directive/ngRepeat

2
Gerson Goulart

Sie haben wahrscheinlich Ihren Controller auf dem falschen Attribut, es sei denn, Sie möchten einen neuen Controller für jedes Element im Array.

Das zweite Problem "response.text" gibt ein Array vom Controller zurück. " Ist dies das Array, das Sie wiederholen möchten?

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

Und dann die dritte Frage: Was ist der Wert des ng-repeat-Attributs: Es soll der Wert eines beliebigen gültigen Arrays in Ihrem $scope oder viewModel sein. response.text wäre also ein gültiges Element, das in ng-repeat eingefügt werden sollte, da es sich um ein Array handelt. Wie ich es oben habe, haben Sie jetzt für jeden Artikel in reponse.text ein item-Objekt. Wenn dies nicht der Fall ist, können Sie einfach {{item}} drucken. Wenn item Eigenschaften hat, können Sie beispielsweise Folgendes tun: {{item.someProperty}}

1
Tom