I’m new to angularjs (and programming). I’m trying to display a json file to my view (home.html) with $http and ngRepeat but it does not work. When I inspect angular responses, I see that there are tens of scopes. Each scope contains a character of my json file.
here is my 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>
here is my view (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>
here is my json file
[
{"id": 0, "name": "Clément", "nickname": "lol"},
{"id": 1, "name": "Léa", "nickname": "lulz"},
{"id": 2, "name": "Romane", "nickname": "lolilol"}
];
Can you help me ? Thank you very much !
