Question

我是angularjs的新手，我试图在视图中加载来自我的JSON文件的数据。 JSON文件使用li列出了一些列表。但是我的观点没有显示出来。

这是我的＆＃39; index.html＆＃39;文件

<div id="navbar" class="navbar-collapse collapse">
 <ul class="nav navbar-nav navbar-right">
  <li ng-repeat="item in navbaritem.navigation">
   <a class="{{ item.class }}" href="#" ng-href="{{ item.url }}">{{ item.title }}</a>
  </li>
 </ul>
</div>

这是我的controller.js

(function(){
    var app = angular.module('myapp', []);
    app.controller('mycntrl', function($scope, $http) {
    $scope.navbaritem = [];
    $http.get('pages/navbar.json').success(function(data) {
        $scope.navbaritem = data;

    }, function (err,data) {
        if(err){

            return console.log(err);
        }
        console.log(data);

    });
 }); 
});

这是我的＆＃39; pages / navbar.json＆＃39;文件

{
   "general":{
      "logo":"images/logo.jpeg",
      "name" : "Company Name"
   },
   "navigation":[
      {
         "title":"Home",
         "link":"#"
      },
      {
         "title":"About",
         "link":"#"
      },
      {
         "title":"Services",
         "link":"#"
      },
      {
         "title":"Contact",
         "link":"#"
      }
   ]
}

我的输出就像这个{{item.title}}一样，我也得到了错误

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.1/$injector/modulerr?p0=myapp&p1=Error%3A%2…localhost%2Fangular-theme%2Fassets%2Fangularjs%2Fangular.min.js%3A21%3A332)

Answer 1

这是一个有效的例子：

注意：由于SO片段编辑器不允许使用其他文件，因此我使用T模拟了$http我的服务中的$timeout来电，这也是一个承诺。

<强>段

＆＃13;

(function() {
  'use strict';

  angular.module('app', []);

  angular.
  module('app')
    .controller('ExampleController', ['$scope', 'MyService', function($scope, MyService) {
      // Call service to get navbar items
      MyService.getNavbarItems()
        .then(function(data) {
          // Once promise success, update $scope
          $scope.navbaritem = data;
        });
    }])
    .factory('MyService', ['$timeout', function($timeout) {
      return {
        getNavbarItems: function() {
          // Simulate 250ms $http api call
          // Use return $http.get('/api/navbar/items') in your code
          return $timeout(function() {
            return {
              "general": {
                "logo": "images/logo.jpeg",
                "name": "Company Name"
              },
              "navigation": [{
                  "title": "Home",
                  "link": "/home",
                  "class": "item"
                },
                {
                  "title": "About",
                  "link": "/about"
                },
                {
                  "title": "Services",
                  "link": "/services"
                },
                {
                  "title": "Contact",
                  "link": "/contact"
                }
              ]
            }
          }, 250);
        }
      }
    }])

})();

＆＃13;

<!doctype html>
<html lang="en" ng-app="app">

<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
</head>

<body ng-controller="ExampleController">

  <div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right">
      <li ng-repeat="item in navbaritem.navigation">
        <a class="{{ item.class }}" href="#" ng-href="{{ item.link }}">{{ item.title }}</a>
      </li>
    </ul>
  </div>

</body>

</html>

＆＃13;

无法从AngularJS中的JSON文件中获取数据

1 个答案: