我是angularjs（和编程）的新手。我正在尝试使用$ http和ngRepeat在我的视图（home.html）中显示一个json文件，但是它不起作用。当我检查角度响应时，我发现有几十个范围。每个范围都包含我的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的注释删除分号，然后在$ http.get调用中将序列化的json字符串转换为javascript对象：
$scope.students = angular.fromJson(data);
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句