在angularjs中使用$http将json文件显示给视图

Displaying json file to the view with $http in angularjs

本文关键字：文件 json 显示 视图 http angularjs      更新时间：2023-09-26

我是angularjs(和编程)的新手。我试图用$http和ngRepeat显示一个json文件到我的视图(home.html)，但它不起作用。当我检查角响应时，我看到有几十个范围。每个作用域包含json文件的一个字符。

这里是控制器(index.html)

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
  <link rel="stylesheet" href="css/app.css"/>
  <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body ng-app="monApp">
<div ng-view></div>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  <script src="https://code.angularjs.org/1.2.16/angular-route.js"></script>
  <script>
  var monApp = angular.module('monApp', []);
  monApp.config(function($routeProvider){
    $routeProvider
      .when('/', {templateUrl: 'partials/home.html', controller: 'StudentListController'})
      .when('/secteurs/:id', {templateUrl: 'partials/secteurs.html', controller: 'SecteursController'})
      .otherwise({
        template: "ca nexiste pas!"
      });
  });
  monApp.controller('StudentListController', function($scope, $http){
    $http.get('student.json').success(function(data){
      $scope.students = data;
    });
  });
  monApp.controller('SecteursController', function($scope, $routeParams){
    $scope.secteur = students[$routeParams.id];
  });
  </script>

  <!--In production use: <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>-->
  <!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>-->

  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>
  <script src="css/jquery.js"></script>
  <script src="css/bootstrap.js"></script>
</body>
</html>

这是我的视图(home.html)

    <div class="container">
  <div class="row">
    <div class="col-md-4 col-md-4 col-md-4"></div>
    <div class="col-md-4 col-md-4 col-md-4">
        <div class="input-group input-group-lg col-lg-12">
            <input type="text" class="form-control" placeholder="search a student" ng-model="query"/>
        </div>
    </div>
</div>
  <div class="row" id="secteurmargin" >
    <div class="col-md-4 col-md-4 col-md-4"></div>
    <div class="col-md-4 col-md-4 col-md-4">
        <div ng-repeat="student in students | filter: query">
          <p>
            <a href="#/secteurs/{{student.id}}">{{student.name}}</a> 
          </p>
            <p>{{student.nickname}}</p>
        </div>

    </div>
  </div>
</div>

这是我的json文件

    [
            {"id": 0, "name": "Clément", "nickname": "lol"},
            {"id": 1, "name": "Léa", "nickname": "lulz"},
            {"id": 2, "name": "Romane", "nickname": "lolilol"}
];

你能帮我吗?非常感谢!

你需要去掉每个Anthony注释的分号，并将序列化的json字符串转换为$http中的javascript对象。电话:

 $scope.students = angular.fromJson(data);
相关文章：