我是 angularjs(和编程)的新手。 我尝试使用 $http 和 ngRepeat 在我的 View (home.html) 中显示 json 文件，但它不起作用。 当我检查 Angular 响应时，我发现有数十个范围。每个范围都包含我的 json 文件的一个字符。
这是我的 Controller (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.get 调用中的 JavaScript 对象:
$scope.students = angular.fromJson(data);
关于javascript - 在 angularjs 中使用 $http 将 json 文件显示到 View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24498503/