使用JSON对象进行ng-repeat并不起作用

时间:2015-08-05 16:08:39

标签: javascript arrays json angularjs ng-repeat

一定是热......

我有一个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运行得很好。

编辑编辑编辑:上传了一个console.log(results);的screendump enter image description here

1 个答案:

答案 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>