Angular ng-repeat不通过json进行迭代
[英]Angular ng-repeat not iterating through json
问题描述
I am working on an app, and part of it is supposed to list the names of people from a javascript object. 
我正在开发一个应用程序，它的一部分应该列出javascript对象中的人的名字。 However, it does not seem to iterate through my json as I would expect, instead it returns the entire thing as if it was one object. 但是，它似乎并没有像我期望的那样遍历我的json，相反，它返回的整个内容就像是一个对象一样。 Why does it do this? 为什么这样做呢？
Broken Plunker https://plnkr.co/edit/u9DHsTlaO0H2G2jqnzLa 破碎的傻瓜https://plnkr.co/edit/u9DHsTlaO0H2G2jqnzLa
Index.html 的index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<script src="app.js"></script>
</head>
<body>
<people-list></people-list>
</body>
</html>
app.js app.js
var app = angular.module("plunker", []);
app.directive("peopleList", function() {
return {
restrict: "E",
templateUrl: "people-list.html",
controller: function() {
this.people = peopleObject;
},
controllerAs: "people"
};
});
var peopleObject = [
{ firstname: 'John',
middlename: 'K',
lastname: 'Doe',
sex: "M"
},
{
firstname: 'Jane',
middlename: 'R',
lastname: 'Doe',
sex: "F"
},
{
firstname: 'Jacob',
middlename: 'Harold',
lastname: 'Smith',
sex: "M"
}
];
people-list.html 人list.html
<ul class="list-group menuIcons">
<li ng-click="tab.setTab(1);" class="list-group-item" ng-repeat="person in people">
{{person.firstname}}
</li>
</ul>
3 个解决方案
解决方案1
4 已采纳 2017-03-06 06:49:47
Try change to this. 尝试更改为此。 you define controllerAs in directive then you should use that in template 您在指令中定义controllerAs ，那么您应该在模板中使用它
<ul class="list-group menuIcons">
<li ng-click="tab.setTab(1);" class="list-group-item" ng-repeat="person in people.people">
{{person.firstname}}
</li>
</ul>
解决方案2
0 2017-03-06 06:53:42
You missed out to put controllerAS alias in ng-repeat. 您错过了将controllerAS别名放入ng-repeat中的方法。
<ul class="list-group menuIcons">
<li ng-click="tab.setTab(1);" class="list-group-item" ng-repeat="person in people.people">
{{person.firstname}}
</li>
</ul>
解决方案3
0 2017-03-06 06:54:26
people contain another object people, so you need to use person.person 人员包含另一个对象人员，因此您需要使用person.person
like as below code 像下面的代码
<ul class="list-group menuIcons">
<li ng-click="tab.setTab(1);" class="list-group-item" ng-repeat="person in people">
{{person.firstname}}
</li>
</ul>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.