gpt4 book ai didi

javascript - 在 angularjs 中使用 $http 将 json 文件显示到 View

转载 作者:行者123 更新时间:2023-11-28 08:08:55 25 4
gpt4 key购买 nike

我是 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com