带有 JSON 对象的 ng-repeat 不起作用

Question

一定是热...

我有一个想要通过 ng-repeat 运行的 json 对象，应该很简单，但是唉！它不起作用。

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>，类似于：

<a data-ng-repeat="x in template.menuObj" href="" class="ng-binding ng-scope"></a>

所以我猜 angular 看到了 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 工作得很好。

EDIT EDIT EDIT：上传了console.log(results);的屏幕转储

Answer 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>