使用角度JS智能表

Question

我想为我的网站使用AngularJS智能表。我已经浏览了文档(智能表(。很难理解app.factory在这里是如何工作的。我想知道如何为数据库中的数据实现createRandomItem函数(mongodb(。

app.factory('Resource', ['$q', '$filter', '$timeout', function ($q, $filter, $timeout) {
    //this would be the service to call your server, a standard bridge between your model an $http
    // the database (normally on your server)
    var randomsItems = [];
    function createRandomItem(id) {
        var heroes = ['Batman', 'Superman', 'Robin', 'Thor', 'Hulk', 'Niki Larson', 'Stark', 'Bob Leponge'];
        return {
            id: id,
            name: heroes[Math.floor(Math.random() * 7)],
            age: Math.floor(Math.random() * 1000),
            saved: Math.floor(Math.random() * 10000)
        };
    }
    for (var i = 0; i < 1000; i++) {
        randomsItems.push(createRandomItem(i));
    }

    //fake call to the server, normally this service would serialize table state to send it to the server (with query parameters for example) and parse the response
    //in our case, it actually performs the logic which would happened in the server
    function getPage(start, number, params) {
        var deferred = $q.defer();
        var filtered = params.search.predicateObject ? $filter('filter')(randomsItems, params.search.predicateObject) : randomsItems;
if (params.sort.predicate) {
            filtered = $filter('orderBy')(filtered, params.sort.predicate, params.sort.reverse);
        }
        var result = filtered.slice(start, start + number);
        $timeout(function () {
            //note, the server passes the information about the data set size
            deferred.resolve({
                data: result,
                numberOfPages: Math.ceil(filtered.length / number)
            });
        }, 1500);

        return deferred.promise;
    }
    return {
        getPage: getPage
    };
}]);

Answer 1

好的...我闪耀的时刻..:D....开玩笑。。你的答案是波纹管..

好吧，这是一个相当直接的例子，如果你熟悉角度工厂。

当您使用工厂服务时，它会执行工厂定义中的代码，并返回您喜欢调用函数的任何内容。

所以上面的代码所做的是当你使用这个工厂服务时，简单地在数组中生成一个随机项目(复仇者联盟(列表randomItems该步骤相当简单。 如果你看一下createRandomItem(id)和它后面的for循环。

然而，诀窍在于getPage()以及Resource factory正在返回的内容。所以让我们开始一段旅程。

在调用Resourse.getPage()时使用Resource工厂的代码中，它将返回一个promise对象，您可以在该对象上调用其他JS函数。 在getPage()内部，如您所见，它设置了一个timeout，以使用具有data变量并numberOfPages的对象调用resolve， 在deffered对象上，该对象在该deffered对象的promise上触发doneCallback。

所以当你服务喜欢

Resourse.getPage(1,2,3) // please see the use of these arguments inside the  getPage function
.done(function(result){
   result.data; //the fake server data from the factory
   result.numberOfPages; //this is computed in factory as well
});

当 1500ms 传递时，传递给 done 的函数/回调被三重奏。

总结和答案

注意：请先阅读上面的内容，我花了很长时间才写出来。

现在来解决您的问题。您可以做的是修改此

app.factory('Resource', ['$q', '$filter', '$timeout', function ($q, $filter, $timeout) 

自

app.factory('Resource', ['$http', '$q', '$filter', '$timeout', function ($http, $q, $filter, $timeout)

使用$http从服务器或mongodb检索data，并使用来自服务器的数据填充数组。

$http.get(server_url).success(function(response){
    //....do something with the response from the server like filtering etc.. 
    //finally..
    deferred.resolve({
       data: response
    });
});

最后使用服务时

Resourse.getPage(1,2,3) //what ever you want to pass its not necessory to pass the same as above
  .done(function(response){
     //do what ever you want to do with response from your factory.. PHEW...
   });

P.S.0.这是我迄今为止提供的最长的答案。噗嗤:P

附言1.请随时在评论中提出任何问题