0
當我單擊「顯示所有產品」時，僅顯示錶頭，而不是數據。當控制器嘗試使用AJAX調用獲取數據時，我也沒有收到任何錯誤。AngularJS中的數據未獲取
這是我的完整代碼。
<html ng-app="mainApp">
<head>
<title>grocerywww.com Admin Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="http://grocerywww.com/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12" style="background-color: #ABCDEF; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h1>grocerywww.com Admin Page</h1>
</div>
</div>
<div class="row">
<div class="col-lg-3" style="background-color: #ABCDEF; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class="fake-link-heading"><b> PRODUCTS </b></span><br>
<span class="fake-link" id="fake-link-list-all-products"><a href="#showProducts">Show All Products</a></span><br>
</div>
<div class="col-lg-9">
<h2>AngularJS Sample Application</h2>
<div>
<div ng-view></div>
<script type="text/ng-template" id="addStudent.htm">
<h2> Add Student </h2>
{{message}}
</script>
<script type="text/ng-template" id="showProducts.htm">
<table class="table table-bordered">
<caption>PRODUCT'S LIST</caption>
<thead><tr><th>#</th><th>Product Name</th><th>Category Name</th><th>Image</th></tr></thead>
<tbody>
<tr ng-repeat="product in productlist|orderBy:product_id ">
<td>{{product.product_id}}</td>
<td>{{product.brand_name}}<a id=product_{{product.product_id}} class='product' href='#'> {{product.product_name}} </a><br>
<a id=imagepath_{{product.product_id}} class='imagepath' href='#'>{{product.product_image_path}}</a>
<input id=input_{{product.product_id}} class='imagepath_editbox' type='text' value={{product.product_image_path}} size='40px;'></td>
<td>{{product.sub_category_name}}</td>
<td><img src=http://grocerywww.com{{product.product_image_path}} 'width='75' height='75'/></td>
<td>
<input id={{product.product_id}}_0_photo type='file' name={{product.product_id}}_0_photo /><br>
<button type='button' id={{product.product_id}}_0_{{product.product_image_path}} class='btn btn-primary btn-sm fileUpload'><span class='glyphicon glyphicon-upload'></span> Start Upload</button>
</td>
</tr>
</tbody>
</table>
</script>
</div>
<script>
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/addStudent', {
templateUrl: 'addStudent.htm',
controller: 'AddStudentController'
}).
when('/showProducts', {
templateUrl: 'showProducts.htm',
controller: 'ProductsController'
}).
otherwise({
redirectTo: '/addStudent'
});
}]);
mainApp.controller('AddStudentController', function($scope) {
$scope.message = "This page will be used to display add student form";
});
mainApp.controller('ViewStudentsController', function($scope) {
$scope.message = "This page will be used to display all the students";
});
mainApp.controller('productsController', function($scope,$http) {
$http.get("http://admin.localhost/cgi-bin/product.pl")
.success(function(response)
{
$scope.productlist = response.products;
alert ('here');
})
.error(function(data, status, headers, config)
{
alert ('productsController Error');
});
});
</script>
</div>
</body>
</html>
M我缺少任何東西？
這些是可選參數。無論如何，我嘗試了你所提出的改變，仍然是同樣的行爲。 – 2014-12-03 14:51:34