使用从API返回的数据创建有序列表

时间:2015-06-02 09:19:00

标签: javascript angularjs angular-http

我遵循了很多有关此内容的教程但却无法正常使用。我想创建一个带有通过API接收的操纵数据的有序列表。我为每个需要询问的WebService创建了一个工厂。

厂:

angular.module('aparcare').factory('Items', function ($http) {
    return {
        get: function (fields) {
            return $http({
                method: "POST",
                url: "the-url-to-the-api",
                data: "field=2&anotherfield=4",
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
            }).then(function (response) {
                return response.data.Items;
            }, function (error) {
                console.log(error);
            });
        }
    }
});

控制器:

angular.module('app').controller('ItemController', function ($http, $rootScope, $window, $scope, Items) {
    var controller = this;
    controller.items = [];
    //Call the API
    Items.get().then(function (response) {        
        //Transform array of objects in associative id => object
        angular.forEach(response, function (item) {
            controller.items[item.ID] = item;
        });

    }, function (error) {
        console.log("Error ocurred on API call");
    });
});

模板

<ul class="dropdown-menu" role="menu" id="select-entity">

    <li ng-repeat="item in controller.items">
        <a ng-click="controller.select_item(item.ID)">{{ item.DESCRIPTION }}</a>
    </li>
</ul>

目前,日志顺序为1 3 2而不是1 2 3

1 个答案:

答案 0 :(得分:3)

您无需创建关联数组。

Items.get().then(function (items) { 
    //Assign items directly
    controller.items = items;
}, function (error) {

});

DEMO