Question

我哪里错了？ 我无法在网页上访问JSON文件，因此请检查我所有相关的代码。

的index.html

  <div class="topnav" id="myTopnav">
    <a href="#home" class="active">Kota</a>
    <a href class="floatingbox list" 
       ng-repeat="nav in navs"></a>
       <a href ng-repeat="n in nav.data_list">{{n.name}}</a>

    <a href="#" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
    </a>
   </div>
 </div>

data.json文件

 {
    "view_type": 2,
    "position": 2,
    "data_list": [
        {
            "name": "Merchant",
            "img": "url"
        },
        {
            "name": "Hostel & PG",
            "img": "url"
        },
        {
            "name": "Education",
            "img": "url"
        }

app.js

function NavController($scope, $http) {
    $http.get('data.json').success(function(data) {
        $scope.navs = data;
    });

Answer 1

您的锚标记未正确关闭。

<div class="topnav" id="myTopnav">
    <a href="#home" class="active">Kota</a>
    <a href class="floatingbox list" 
       ng-repeat="nav in navs">
       <a href ng-repeat="n in nav.data_list">{{n.name}}</a>
    </a>
    <a href="#" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
    </a>
   </div>
 </div>

此外，您还需要添加app控制器才能调用$http方法

app.controller('myCtrl', function($scope, $http) {
  $http.get('data.json').
  then(function(response) {
      $scope.nav = response.data;
  });
});

Answer 2

你需要

app.controller('myCtrl', function($scope, $http) {
  $http.get('data.json').
  then(function(response) {
      $scope.nav = response.data;
  });
});

WORKING PLUNKER

如何在angularjs中访问网页上给定格式的本地JSON文件

2 个答案: