Question

当我点击＆＃34;显示所有产品＆＃34;时，只有表格标题是displayg，而不是数据。当控制器尝试使用AJAX调用获取数据时，我也没有收到任何错误。

这是我的完整代码。

<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>

我错过了什么？

Answer 1

检查ProductsController的拼写 - 它在你的定义中是小写的，但是当你使用它时，它是大写的（第一个字符）。控制器名称区分大小写。

Answer 2

您正在使用.success(function(response)...它应该是.success(function(data, status, headers, config)。然后使用$scope.productlist = data.products。

数据未在AngularJS中获取

2 个答案: