Question

我尝试使用angularJS显示json文件中的数据，但我无法到达它。我尝试了很多次，但我没有找到问题。我复制了许多其他的例子，我得到了相同的结果。请帮我找到它。这是我的html文件：

<html>
   <head>
      <title>Angular JS Includes</title>

   </head>
   <body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "App" ng-controller = "TodoCtrl">

        <ul>
    <li ng-repeat="todo in todos">
      {{todo.text}} - <em>{{todo.done}}</em>
    </li>
  </ul>
      </div>

      <script>
         var App = angular.module('App', []);

App.controller('TodoCtrl', function($scope, $http) {
  $http.get('todos.json')
       .then(function(res){
          $scope.todos = res.data;                
        });
});
      </script>

      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

   </body>
</html>

todos.json：

[{ "text":"learn angular", "done":true },
 { "text":"build an angular app", "done":false},
 { "text":"something", "done":false },
 { "text":"another todo", "done":true }]

Answer 1

在代码之前添加角度脚本。

<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

<script>
  var App = angular.module('App', []);

  App.controller('TodoCtrl', function($scope, $http) {
     $http.get('todos.json')
       .then(function(res){
          $scope.todos = res.data;                
        });
  });
 </script>

Demo

Answer 2

您需要在自定义脚本之前添加角度脚本，或使用onload函数来加载文档。

<html>
   <head>
      <title>Angular JS Includes</title>
   </head>
   <body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "App" ng-controller = "TodoCtrl">

        <ul>
    <li ng-repeat="todo in todos">
      {{todo.text}} - <em>{{todo.done}}</em>
    </li>
  </ul>
      </div>
     <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

      <script>
         var App = angular.module('App', []);

App.controller('TodoCtrl', function($scope, $http) {
  $http.get("https://api.myjson.com/bins/zx3wn")
       .then(function(res){
          $scope.todos = res.data;                
        });
});
      </script>

   </body>
</html>

Answer 3

我刚刚将浏览器更改为mozilla及其工作。感谢您的回复。

使用angularJS

3 个答案: