一定是热......
我有一个json对象,我想通过ng-repeat运行,应该很简单,但唉!它没有用。
HTML
<a data-ng-repeat="x in template.menuObj" href="{{ x.link }}">{{ x.name }}</a>
JSON
[
{
"ACL":{
"*":{
"read":true
}
},
"link":"home",
"menu":"main",
"name":"Home",
"order":1,
"objectId":"aDcb0HUXwB",
"createdAt":"2015-08-05T15:29:05.948Z",
"updatedAt":"2015-08-05T15:29:11.915Z"
},
{
"ACL":{
"*":{
"read":true
}
},
"link":"category/the-interesting-stuff",
"menu":"main",
"name":"The Interesting Stuff",
"order":2,
"objectId":"znXfUF0kdJ",
"createdAt":"2015-08-05T15:33:11.332Z",
"updatedAt":"2015-08-05T15:33:39.738Z"
},
{
"ACL":{
"*":{
"read":true
}
},
"link":"category/the-fun-stuff",
"menu":"main",
"name":"The Fun Stuff",
"order":3,
"objectId":"WiPmXdhaOu",
"createdAt":"2015-08-05T15:33:44.667Z",
"updatedAt":"2015-08-05T15:34:06.058Z"
},
{
"ACL":{
"*":{
"read":true
}
},
"link":"category/the-nerdy-stuff",
"menu":"main",
"name":"The Nerdy Stuff",
"order":4,
"objectId":"Z0aSsnpV0B",
"createdAt":"2015-08-05T15:34:09.859Z",
"updatedAt":"2015-08-05T15:34:33.564Z"
},
{
"ACL":{
"*":{
"read":true
}
},
"link":"page/about-me",
"menu":"main",
"name":"About Me",
"order":5,
"objectId":"Gm35DOju7t",
"createdAt":"2015-08-05T15:34:37.759Z",
"updatedAt":"2015-08-05T15:34:55.387Z"
}
]
当我运行这个时,我得到5个空<a>
&#39; s,如:
<a data-ng-repeat="x in template.menuObj" href="" class="ng-binding ng-scope"></a>
所以我猜角度看到了5个数组,但不知怎的,键没有被捕获?
编辑:这是json对象的创建方式(通过parse.com):
var Menu = Parse.Object.extend('Menu');
var query = new Parse.Query(Menu);
query.ascending('order');
query.equalTo('menu', 'main');
query.find().then(function(results){
console.log(JSON.stringify(results));
$scope.template.menuObj = results;
}, function(error){
// error-handling
console.log("Error: " + error.code + " " + error.message);
});
编辑编辑:控制器等。
blogApp.controller('templateCtrl', function($scope, templateService) {
$scope.template = templateService;
var Menu = Parse.Object.extend('Menu');
var query = new Parse.Query(Menu);
query.ascending('order');
query.equalTo('menu', 'main');
query.find().then(function(results){
console.log(JSON.stringify(results));
$scope.template.menuObj = results;
}, function(error){
// error-handling
console.log("Error: " + error.code + " " + error.message);
});
});
templateService是一个绑定父控制器的工厂。重要的是要注意,在我开始搞乱这个项目的parse.com之前,当我通过PHP / MySQL检索($ http)一个json对象时,ng-repeat运行得很好。
答案 0 :(得分:1)
发生的是results
是数组对象,并且您将其分配给$scope.template.menuObj
,但json数组没有名称。你可以给它起一个名字:
"menuObj": [
{
"ACL":{
"*":{
"read":true
}
},
"link":"home",
"menu":"main",
"name":"Home",
"order":1,
"objectId":"aDcb0HUXwB",
"createdAt":"2015-08-05T15:29:05.948Z",
"updatedAt":"2015-08-05T15:29:11.915Z"
},
{
"ACL":{
"*":{
"read":true
}
},
"link":"category/the-interesting-stuff",
"menu":"main",
"name":"The Interesting Stuff",
"order":2,
"objectId":"znXfUF0kdJ",
"createdAt":"2015-08-05T15:33:11.332Z",
"updatedAt":"2015-08-05T15:33:39.738Z"
},
{
"ACL":{
"*":{
"read":true
}
},
"link":"category/the-fun-stuff",
"menu":"main",
"name":"The Fun Stuff",
"order":3,
"objectId":"WiPmXdhaOu",
"createdAt":"2015-08-05T15:33:44.667Z",
"updatedAt":"2015-08-05T15:34:06.058Z"
},
{
"ACL":{
"*":{
"read":true
}
},
"link":"category/the-nerdy-stuff",
"menu":"main",
"name":"The Nerdy Stuff",
"order":4,
"objectId":"Z0aSsnpV0B",
"createdAt":"2015-08-05T15:34:09.859Z",
"updatedAt":"2015-08-05T15:34:33.564Z"
},
{
"ACL":{
"*":{
"read":true
}
},
"link":"page/about-me",
"menu":"main",
"name":"About Me",
"order":5,
"objectId":"Gm35DOju7t",
"createdAt":"2015-08-05T15:34:37.759Z",
"updatedAt":"2015-08-05T15:34:55.387Z"
}
];
或者保留它,就像你拥有它一样,但控制器必须是这样的:
blogApp.controller('templateCtrl', function($scope, templateService) {
$scope.template = templateService;
var Menu = Parse.Object.extend('Menu');
var query = new Parse.Query(Menu);
query.ascending('order');
query.equalTo('menu', 'main');
query.find().then(function(results){
$scope.template = JSON.stringify(results);
}, function(error){
// error-handling
console.log("Error: " + error.code + " " + error.message);
});
});
这样的观点:
<body ng-app="blogApp"><!-- angular.module('blogApp', []); -->
<div ng-controller="templateCtrl" >
<nav ng-repeat="a in template">
<a href="{{ a.link }}">{{ a.name }}</a>
</nav>
</div>
</body>
但是如果你想要使用它,你应该这样做:
<body ng-app="blogApp"><!-- angular.module('blogApp', []); -->
<div ng-controller="templateCtrl" >
<nav ng-repeat="a in template.menuObj">
<a href="{{ a.get('link') }}">{{ a.get('name') }}</a>
</nav>
</div>
</body>