【问题标题】:AngularJS set var: http getAngularJS 设置变量:http 获取
【发布时间】:2015-05-05 11:08:35
【问题描述】:

我设置了一个角度过滤器,效果很好:

categorieFilter = angular.module("categorieFilter", [])
categorieFilter.controller("catFilter", ["$scope", "store", function($scope, store){
    $scope.search = "";
    $scope.products = [];
    $scope.categories = [];

    $scope.categories = store.getCategories();
    $scope.products = store.getProducts();

    $scope.filterProductsByCats = function(category){
        $scope.search = category;
    };
}])
categorieFilter.factory('store', function(){
            var categories = ['Lattes','CC Blend','Frappes'];
            var products = [
                {name: 'Latte machiatto',category: 'Lattes'},
                {name: 'Frappe ice',category: 'Frappes'},
                {name: 'Latte caramel',category: 'Lattes'},
                {name: 'Frappe speculoos',category: 'Frappes'},
                {name: 'Cappucino',category: 'CC Blend'},
                {name: 'Filter coffee',category: 'CC Blend'},
            ];
            return {
                getCategories : function(){
                    return categories;
                },
                getProducts : function(){
                    return products;
                }
            };
        }); 

但是 var 类别和 var 产品仍然是硬编码的,所以我想从我的服务器检索所需的数据来填充这些变量。我似乎无法做到这一点?我有另一个功能可以获取所需的数据,但我不知道如何将这些 2 in 1...?

categories = angular.module('categories', []);
categories.controller("category",function($scope, $http){
    var serviceBase = 'api/';
    $http.get(serviceBase + 'categories').then(function (results) {
        $scope.categories = results.data;
        for(var i = 0; i < $scope.categories.length; i++){
            var categories = $scope.categories[i];
        }
});
});

那么如何正确地将 var 类别设置为所需的 $http.get 以将我的服务器数据检索到上面的过滤器中?

【问题讨论】:

    标签: javascript angularjs


    【解决方案1】:

    我认为您应该能够摆脱服务中的硬编码块并返回:

    return {
        getCategories: $http.get('/categories').success(function (data) {
            return data;
        }),
    
        getProducts: $http.get('/products').success(function (data) {
            return data;
        })
    }
    

    请确保为服务正确设置依赖项(即$http):

    .factory('store', function ($http) {
        // The above return block here
    });
    

    这应该可以解决问题!

    【讨论】:

    • 我的依赖项是否已为服务正确设置是什么意思?我收到一个错误:ReferenceError: $http 未定义。但我认为它与这些依赖关系有关?
    • 您收到该错误是因为您尚未注入 $http 依赖项。请参阅上面的编辑,其中我将 $http 添加为工厂定义函数的参数。
    • 是的,解决了那个问题,但现在我得到了:错误:[$http:badreq] Http 请求配置必须是一个对象。收到:函数(响应)
    • 哇,这个答案是我的火车残骸。我已经更新了答案,所以$http 使用了正确的响应格式。请在此处阅读$http 的更多信息:docs.angularjs.org/api/ng/service/$http
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-02-07
    • 1970-01-01
    • 2014-10-16
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多