Question

我正在尝试从视角中的角度控制器渲染json结果。但我没有这样做。我需要显示服务中存在的名称列表。如果我写像{{menu [0] .name}}我得到一个结果，但我需要显示一个名单

HTML

        <table>
         <tr ng-repeat="menu in MenuAnshu">
        <td>

        {{menu.name}}
    <  /td>
</tr>

下面的

是我的控制器代码：

         (function () {
var EmployeesController = function ($scope, employeeService, $log) {
    var employees = function (data) {
        $scope.Employees = data;

    };

    var MenuAnshuData = function (data) {
        $scope.MenuAnshu = data;
       console.log(data)
    };

    var errorDetails = function (serviceResp) {
        $scope.Error = "Something went wrong ??";
    };
    employeeService.employees().then(employees, errorDetails);
    employeeService.MenuAnshuData().then(MenuAnshuData, errorDetails);
    $scope.Title = "Employee Details Page";
    $scope.EmployeeName = null;
};

app.controller("EmployeesController", ["$scope", "employeeService", "$log", EmployeesController]);

}（））;

从服务我得到这样的数据

            (function () {
var employeeService = function ($http) {
    var employees = function () {
        return $http.get("http://localhost:63352/api/ptemployees")
                    .then(function (serviceResp) {
                        return serviceResp.data;
                    });
    };

    var MenuAnshuData = function () {
        return $http.get("http://redshaft.in/ocapi/index.php?route=api/order/getcategories").then(function (serviceResp) {
            return serviceResp.data;
        });


    };
    return {
        employees: employees,           
        MenuAnshuData: MenuAnshuData

    };
};

var module = angular.module("ProjectTrackingModule");
module.factory("employeeService", ['$http', employeeService]);

}（））;

我觉得我在js方面做错了什么。我试图通过menu.name访问数组，但控制器数据是一个有数组的对象。

我在控制器端的JSON结果

               {"categories":[{"category_id":"20","image":"catalog\/demo\/compaq_presario.jpg","parent_id":"0","top":"1","column":"1","sort_order":"1","status":"1","date_added":"2009-01-05 21:49:43","date_modified":"2011-07-16 02:14:42","language_id":"1","name":"Desktops","description":"&lt;p&gt;\r\n\tExample of category description text&lt;\/p&gt;\r\n","meta_title":"","meta_description":"Example of category description","meta_keyword":"","store_id":"0"},{"category_id":"18","image":"catalog\/demo\/hp_2.jpg","parent_id":"0","top":"1","column":"0","sort_order":"2","status":"1","date_added":"2009-01-05 21:49:15","date_modified":"2011-05-30 12:13:55","language_id":"1","name":"Laptops &amp; Notebooks","description":"&lt;p&gt;\r\n\tShop Laptop feature only the best laptop deals on the market. By comparing laptop deals from the likes of PC World, Comet, Dixons, The Link and Carphone Warehouse, Shop Laptop has the most comprehensive selection of laptops on the internet. At Shop Laptop, we pride ourselves on offering customers the very best laptop deals. From refurbished laptops to netbooks, Shop Laptop ensures that every laptop - in every colour, style, size and technical spec - is featured on the site at the lowest possible price.&lt;\/p&gt;\r\n","meta_title":"","meta_description":"","meta_keyword":"","store_id":"0"},{"category_id":"25","image":"","parent_id":"0","top":"1","column":"1","sort_order":"3","status":"1","date_added":"2009-01-31 01:04:25","date_modified":"2011-05-30 12:14:55","language_id":"1","name":"Components","description":"","meta_title":"","meta_description":"","meta_keyword":"","store_id":"0"},{"category_id":"57","image":"","parent_id":"0","top":"1","column":"1","sort_order":"3","status":"1","date_added":"2011-04-26 08:53:16","date_modified":"2011-05-30 12:15:05","language_id":"1","name":"Tablets","description":"","meta_title":"","meta_description":"","meta_keyword":"","store_id":"0"},{"category_id":"17","image":"","parent_id":"0","top":"1","column":"1","sort_order":"4","status":"1","date_added":"2009-01-03 21:08:57","date_modified":"2011-05-30 12:15:11","language_id":"1","name":"Software","description":"","meta_title":"","meta_description":"","meta_keyword":"","store_id":"0"},{"category_id":"24","image":"","parent_id":"0","top":"1","column":"1","sort_order":"5","status":"1","date_added":"2009-01-20 02:36:26","date_modified":"2011-05-30 12:15:18","language_id":"1","name":"Phones &amp; PDAs","description":"","meta_title":"","meta_description":"","meta_keyword":"","store_id":"0"},{"category_id":"33","image":"","parent_id":"0","top":"1","column":"1","sort_order":"6","status":"1","date_added":"2009-02-03 14:17:55","date_modified":"2011-05-30 12:15:25","language_id":"1","name":"Cameras","description":"","meta_title":"","meta_description":"","meta_keyword":"","store_id":"0"},{"category_id":"34","image":"catalog\/demo\/ipod_touch_4.jpg","parent_id":"0","top":"1","column":"4","sort_order":"7","status":"1","date_added":"2009-02-03 14:18:11","date_modified":"2011-05-30 12:15:31","language_id":"1","name":"MP3 Players","description":"&lt;p&gt;\r\n\tShop Laptop feature only the best laptop deals on the market. By comparing laptop deals from the likes of PC World, Comet, Dixons, The Link and Carphone Warehouse, Shop Laptop has the most comprehensive selection of laptops on the internet. At Shop Laptop, we pride ourselves on offering customers the very best laptop deals. From refurbished laptops to netbooks, Shop Laptop ensures that every laptop - in every colour, style, size and technical spec - is featured on the site at the lowest possible price.&lt;\/p&gt;\r\n","meta_title":"","meta_description":"","meta_keyword":"","store_id":"0"}]}

我的问题是我无法使用{{menu.names}}在视图上呈现名称列表。我需要做些什么才能获得名单上的名单？

Answer 1

您的代码不易阅读。

我建议您将服务中的承诺退还给您的控制器，然后解决它：

// service
// return the promise of the GET request
var MenuAnshuData = function () {
    return $http.get("http://redshaft.in/ocapi/index.php?route=api/order/getcategories");
};

// controller
// make the call to MenuAnshuData from your service 
employeeService.MenuAnshuData().then(function(response) {

    // log the data so you can inspect what you have
    console.log(response.data)

    // pouplate MenuAnshu with the response
    $scope.MenuAnshu = data;

}, function(error) {

    // handle any failed response 

});

Answer 2

如果要迭代角度js中的对象，则必须执行以下语句：

Ng-repeat="(key,value) in object"

试试看，我已经看到URL在第一时间检索json对象，然后我认为可行。

评论结果！

Answer 3

我认为问题在于这一行： employeeService.MenuAnshuData().then(MenuAnshuData, errorDetails);

您可以按以下方式更新服务：

var MenuAnshuData = function () {
    var config = {method: 'GET', url:"http://redshaft.in/ocapi/index.php?route=api/order/getcategories"}
    return $http(config);
};

然后访问控制器中的promise get方法：

employeeService.MenuAnshuData().then(MenuAnshuData, errorDetails);

无法在视图AngularJS

3 个答案: