Question

一定是热......

我有一个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

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>

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

1 个答案: