在对象字符串或数组上使用AngularJS或JS进行分页

时间:2013-05-09 19:11:23

标签: javascript arrays angularjs pagination

我正在努力在其他开发人员的现有代码上实现分页。我已经尝试实现之前SO帖子中解释的一些解决方案:Pagination on a list using ng-repeat

代码采用二维数组,通过它解析转换为字符串对象,然后在页面上显示。每个对象键用作列。

不确定如何在此设置中使用Angular's builtin Limit filter我认为这将是理想的解决方案。但我也只对JS解决方案持开放态度。 (我已经将其作为JS解决方案在帖子底部开始了。)

var data = [["c1","blah","yup","halted","bacon", "blue"],
            ["c2","blank","everything","nothing test"],
            ["c3","test","vista","xp, 7 "],
            ["c4","true"],
            ["c5","do","something else really long text", "and more"]
        ]

$rootScope.resultsObject = parseResults(data);

var columnSize = ["twelve", "six", "four", "three", "two", "two"]

$rootScope.columnCountShow = columnSize[columnCounter($rootScope.resultsObject)-1]

factory('parseResults', function(){
        return function(resultsData){
            var resultsObject = {};
            var column;
            for(var i = 0; resultsData.length > i; i++){
                column = "column" +i;
                resultsObject[column] = resultsData[i].toString().replace(/[\,]/g, "<br>")
            }
            return resultsObject;
        }
    })

HTML:

<div class="{{columnCountShow}} columns results-column" ng-repeat="resultsObject in resultsObject">
        <div ng-bind-html-unsafe="resultsObject">
</div>

我如何进行show more分页?它会显示每个数组的前2个结果,点击显示更多,然后加载下2个等等。

我正在尝试执行此操作的当前方法:获取数据(在解析之前)并切掉一个部分,并仅解析该位。然后,当他们选择显示更多时,它将接下来几行,等等。

    var limit = 3;
    var start = 0;
    for (var i = 0; i < data.length; i++) {
        var ndata = [[]];
        ndata = data[i].slice(start,limit);
        console.log(ndata);
    }

问题是,data似乎仍然完好无损。 slice似乎没有从数组中删除该部分?

更新

slice绝对不适合我。已实现的JS具有splice方法。 (出于某种原因,我认为它不存在。我目前拼接数据的方式是:

$scope.submitWords = function(){
        event.preventDefault();
        var columnCount = columnCounter($scope.keywords);
        var sendObject = keyWordSplit($scope.keywords, columnCount)

        var limit = 2;
        var start = 0;
        var ndata = [[]];
        for (var i = 0; i < $scope.testData.length; i++) {
            ndata[i] = $scope.testData[i].splice(start,limit);
            console.log(ndata);
            console.log("original data <br>" + $scope.testData);
        $rootScope.resultsObject = parseResults(ndata);
        }
        var columnSize = ["twelve", "six", "four", "three", "two", "two"];
        $rootScope.columnCountShow = columnSize[columnCounter($rootScope.resultsObject)-1];
    }

这样可以正确地分割数据。现在我只需要让它更新我的模型。选择show_more()时,它会替换现有数据而不是附加到其中。

0 个答案:

没有答案