我试图从json文件中获取数据,但我不工作,我已经检查了这里的所有选项,但没有人适合我,没有一个代码可以工作,我不知道是否必须导入其他东西,json文件与索引文件在同一级别,希望你能帮助我
appClients.js
(function(){
var app = angular.module('customer',[]);
alert('Success');
app.controller("CustomerController",function($scope,$http){
$http.get('../customer.json')
.success(function(data) {
// $scope.phones = data;
alert('Success');
})
.error(function(data){
alert('Error');
});
});
});
index.html
<!DOCTYPE HTML>
<html ng-app="customer">
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body class="Master" ng-controller="CustomerController as customer">
<script type="text/javascript" src="js/angularjs.min.js"></script>
<script type="text/javascript" src="js/appClients.js"></script>
<header id="MasterHeader">
</header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-6" id="CustomerList" ng-repeat="product in customer.clients">
<h3>{{product.id}}</h3>
</div>
<div class="col-lg-6" id="CustomerDetails">Details</div>
</div>
</div>
</div>
<footer id="MasterFooter">
</footer>
</body>
</html>
看起来您的IIFE(立即调用的函数表达式)没有被执行。将您的appClient.js文件更新为
(function(){
var app = angular.module('customer',[]);
alert('Success');
app.controller("CustomerController",function($scope,$http){
$http.get('../customer.json')
.success(function(data) {
// $scope.phones = data;
alert('Success');
})
.error(function(data){
alert('Error');
});
});
})();
注意最后一行的附加()
。这应该可以让您看到最初的"成功"警报。
如果ajax调用成功,则需要使结果设置为与HTML中引用的$scope
属性一致的$scope
属性。根据当前的代码段,您似乎在控制器中将结果设置为$scope.phone
,但在HTML中引用了$scope.customer
。