Question

之前可能已经提出过这个问题，但我似乎无法找到任何可以帮助我的答案。

我试图从本地.json文件中获取一些数据，这个工作正常。 console.log()向我展示了一系列对象，但出于某种原因，我的ng-repeat并未在我的视图中显示。

这是我到目前为止所做的：

查看

<ul class="nav nav-list">
    <li ng-repeat="item in items">
        <a href="{{item.url}}">
            <i class="menu-icon fa {{item.icon}}"></i>
            <span class="menu-text">{{item.title}}</span>
        </a>
    </li>
</ul>

MainController 此控制器与我上面的视图一起使用

angular.module("Jorrex").controller("MainController", [
    "$scope", "$location", function ($scope, $location) {
        $.getJSON("jorrex.json").done(function (data) {
            $scope.items = data.items[0].menu;
        });

    }
]);

JSON

{
    "items": [{
        "menu": [{
            "title": "Home",
            "url": "#/Home",
            "icon": "fa-home"
        }, {
            "title": "Portfolio",
            "url": "#/Portfolio",
            "icon": "fa-tasks"
        }, {
            "title": "Skills",
            "url": "#/Skills",
            "icon": "fa-spin fa-cog"
        }, {
            "title": "Contact",
            "url": "#/Contact",
            "icon": "fa-envelope"
        }, {
            "title": "Work",
            "url": "#/Work",
            "icon": "fa-code"
        }, {
            "title": "Gaming",
            "url": "#/Gaming",
            "icon": "fa-gamepad"
        }, {
            "title": "Trophies",
            "url": "#/Gaming/Trophies",
            "icon": "fa-trophy"
        }, {
            "title": "To-Do List",
            "url": "#/Gaming/ToDoList",
            "icon": "fa-check-square"
        }, {
            "title": "About",
            "url": "#/About",
            "icon": "fa-info-circle"
        }]
    }]
}

我做错了什么或者我错过了什么？作为旁注，我没有粘贴到完整的json文件中，因为它非常大。这只是我在我的代码中使用的部分。

当我加载页面时，它实际上显示了一个空的<ul>元素。

更新

当我将此示例数组与一个对象放在一起时，它实际上显示了一些结果：

$scope.items = [
    {
        url: "#/Home",
        icon: "fa-home",
        title: "Home"
    }
];

Answer 1

由于$.getJSON不是angularjs的组成部分，因此您需要申请更改。

试试这个

$scope.$apply(function(){
   $scope.items = data.items[0].menu;
})

Answer 2

如果您不想使用$http，请使用角度$apply服务：

    // Simple GET request example:
    $http({
      method: 'GET',
      url: '/someUrl'
    }).then(function successCallback(response) {
      // this callback will be called asynchronously
      // when the response is available
    }, function errorCallback(response) {
      // called asynchronously if an error occurs
      // or server returns response with an error status.
    });

请参阅doc：https://docs.angularjs.org/api/ng/service/ $ http

ng-repeat不会显示json数据

2 个答案: