Javascript AngularJS 从数组中显示列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26853850/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS display list from an array
提问by Abushawish
I have a controller that returns an array, I'm trying to display every element of that array as a list.
我有一个返回数组的控制器，我试图将该数组的每个元素显示为一个列表。
What I am attempting to do, which is not working:
我试图做的，这是行不通的：
<li ng-repeat="Name in names">
<a ng-controller="PostsCtrl" href="#">{{response.text}}</a>
</li>
response.textreturns an array from the controller.
response.text从控制器返回一个数组。
I am also wondering, what is the value of the ng-repeat attribute supposed to be, any unique string?
我也想知道，ng-repeat 属性的值应该是什么，任何唯一的字符串？
Thank you!
谢谢！
回答by tcase360
Define the array in your controller with the $scope variable:
使用 $scope 变量定义控制器中的数组：
app.controller('PostsCtrl', function($scope) {
$scope.response = { text: ['hello', 'world'] };
}
Then use ng-repeat on the VARIABLE, not the controller.
然后在 VARIABLE 上使用 ng-repeat，而不是在控制器上。
<div ng-controller="PostsCtrl">
<ul>
<li ng-repeat="name in response.text"><a href="#">{{name}}</a></li>
</ul>
</div>
The controller is only used to define what $scope variables you can use in that section, and is not used as a variable itself.
控制器仅用于定义您可以在该部分中使用哪些 $scope 变量，而不用作变量本身。
回答by Gerson Goulart
ngRepeatis basically just like a forloop. There is no default value, you just need to give it the data you want it to iterate through. So when you're doing a ng-repeat="name in names", it is similar to doing something like for(var name in names){}in plain javascript. For it to work properly you need to pass this data to the template via your $scope, as such:
ngRepeat基本上就像一个for循环。没有默认值，你只需要给它你想要它迭代的数据。所以当你在做 a 时ng-repeat="name in names"，它类似于for(var name in names){}在普通的 javascript 中做一些事情。为了使其正常工作，您需要通过您的 将此数据传递给模板$scope，例如：
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>For further reading, please visit: https://docs.angularjs.org/api/ng/directive/ngRepeat
如需进一步阅读，请访问：https: //docs.angularjs.org/api/ng/directive/ngRepeat
回答by Tom
You probably have your controller on the wrong attribute there, unless you want a new controller for every item in the array.
您可能将控制器放在了错误的属性上，除非您想要为数组中的每个项目使用一个新控制器。
The second issue, "response.textreturns an array from the controller." So, is this the array you want to repeat?
第二个问题，“response.text从控制器返回一个数组。” 那么，这是您要重复的数组吗？
<div ng-controller="PostsCtrl">
<li ng-repeat="item in response.text">
<a href="#">{{item}}</a>
</li>
</div>
And then the third question, what is the value of the ng-repeatattribute supposed to be: it's supposed to be the value of any valid array on your $scopeor viewModel. So, response.textwould be a valid item to put on the ng-repeatsince it is an array. As I have it above, you now have an itemobject for every item in reponse.text. If this is as far down as you want to go, you can simply print {{item}}-- if itemhas properties, you could do something like, for instance, {{item.someProperty}}
然后是第三个问题，ng-repeat属性的值应该是什么：它应该是$scopeor上任何有效数组的值viewModel。因此，response.text将是一个有效的项目，ng-repeat因为它是一个数组。正如我在上面所说的，您现在item为reponse.text. 如果这是你想要的程度，你可以简单地打印{{item}}——如果item有属性，你可以做一些类似的事情，例如，{{item.someProperty}}
