Question

嘿伙计，

我正在尝试将我的RSS提要阅读器的回复拆分为页面。我这样做是通过使用RSS项填充feedList数组，并一次取2个项目来显示并将它们放在连接到ng-repeat的displayList数组中。当您单击下一页时，它将使用feedArray中的2个新项更新displayList数组。

我有一个运行时带有一系列名称的简化版本http://jsfiddle.net/halfasleep/ZJFke/4/

当我尝试使用提要阅读器代码实现它时，它不会在尝试显示它之前填充displayList数组，当你点击“下一页”时它会将一些项目放入displayList数组并开始显示它（虽然出于某种原因，一次只能移动1个项而不是2个）。任何帮助将不胜感激！

JS小提琴：http：//jsfiddle.net/WDL8U/

HTML

<html ng-app="FeedReader">
<head>
    <meta charset="UTF-8">
    <title>Reader Trial</title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-resource.js"></script>
    <link rel="stylesheet" href="FeedReader.css" />
</head>

<body ng-controller="blogCtrl">
    There are {{feedList.length}} entries.
    <ul class="blogPosts" ng-class="listClass" ng-init="populate();">
        <li ng-repeat="list in displayList"><h2><a ng-click="publish(list.content);">{{list.title}}</a></h2><p>{{list.contentSnippet}}</p><span> - {{list.author}}</span></li>
    </ul>
    <div class="blogPosts fullWidth" style="height: 500px; overflow: scroll;" ng-hide="noCont" ng-bind-html="htmlContent"></div>
    <div style="clear: both;">
        <a ng-click="prev()" ng-hide="hideP">Previous Page</a>
        <a ng-click="next()" ng-hide="hideN">Next Page</a>
    </div>
    <script src="./feedReader2.js"></script>
</body>
</html>

JS

var feedList = [];
var displayList = [];
var app = angular.module('FeedReader',['ngResource']);

app.factory('feedLoader',['$resource', function($resource){
    var googleAPI = $resource('http://ajax.googleapis.com/ajax/services/feed/load',{},{ 
        collect: { 
            method: 'JSONP', 
            params: { 
                v: '1.0', 
                callback: 'JSON_CALLBACK'
            } 
        } 
    });
    return googleAPI;
}]);

app.service('createFeedList',['feedLoader', function(feedLoader){
    this.get = function(){
            var feed = {
                feedName: 'Slashdot',
                feedURL: 'http://rss.slashdot.org/Slashdot/slashdot'
            };

            feedLoader.collect({
                q: feed.feedURL, 
                num: 10
            },{},function(result){
                var feed = result.responseData.feed.entries;
                for(i = 0; i < feed.length; i++){
                    feedList.push(feed[i]);
                }
            });
        return feedList;
    }
}]);

app.controller('blogCtrl',['$scope', '$sce', 'createFeedList', function($scope, $sce, createFeedList){
    $scope.feedList = createFeedList.get();

    // Page Code


    $scope.hideP = true;

    var begin = 0;
    var end = 2;
    $scope.displayList = [$scope.feedList[begin],$scope.feedList[end]];

    $scope.next = function(){
        if(end <= $scope.feedList.length - 2){
            begin += 2;
            end += 2;
            $scope.displayList = [$scope.feedList[begin],$scope.feedList[end]];
            $scope.hideP = false;
        }
        if(end == $scope.feedList.length-1) {
            $scope.hideN = true;   
        }
    }

    $scope.prev = function(){
        if(end == 3){
            $scope.hideP = true;
        }
        if(end >= 1) {
            begin -= 2;
            end -= 2;
            $scope.displayList = [$scope.feedList[begin],$scope.feedList[end]];
            $scope.hideN = false;
        }
    }


    // Display Content Code
    $scope.noCont = true;
    $scope.listClass = 'fullWidth';

    $scope.publish = function(cont) {
        $scope.noCont = false;
        $scope.htmlContent = $sce.trustAsHtml(cont);
        $scope.listClass = 'halfWidth';
    }
}]);

Answer 1

您需要返回一个promise，然后在数据准备好时填充$ scope.feedList。然后，您也可以对其他$ scope变量执行操作。试一试：

var feedList = [];
var displayList = [];

var app = angular.module('FeedReader',['ngResource']);

app.factory('feedLoader',['$resource', function($resource){
    var googleAPI = $resource('http://ajax.googleapis.com/ajax/services/feed/load',{},{ 
        collect: { 
            method: 'JSONP', 
            params: { 
                v: '1.0', 
                callback: 'JSON_CALLBACK'
            } 
        } 
    });
    return googleAPI;
}]);

app.service('createFeedList',['feedLoader', '$q', function(feedLoader, $q){
    this.get = function(){
            var feed = {
                feedName: 'Slashdot',
                feedURL: 'http://rss.slashdot.org/Slashdot/slashdot'
            };
            var deferred = $q.defer();
            feedLoader.collect({
                q: feed.feedURL, 
                num: 10
            },{},function(result){
                var feed = result.responseData.feed.entries;
                for(i = 0; i < feed.length; i++){
                    feedList.push(feed[i]);
                }
                deferred.resolve(feedList);
            });
        return deferred.promise;
    }
}]);

app.controller('blogCtrl',['$scope', '$sce', 'createFeedList', function($scope, $sce, createFeedList){
    //$scope.feedList = createFeedList.get();
    createFeedList.get().then(function(data) {
        $scope.feedList = data;

        $scope.displayList = [$scope.feedList[begin],$scope.feedList[end]];

    $scope.next = function(){
        if(end <= $scope.feedList.length - 2){
            begin += 2;
            end += 2;
            $scope.displayList = [$scope.feedList[begin],$scope.feedList[end]];
            $scope.hideP = false;
        }
        if(end == $scope.feedList.length-1) {
            $scope.hideN = true;   
        }
    }

    $scope.prev = function(){
        if(end == 3){
            $scope.hideP = true;
        }
        if(end >= 1) {
            begin -= 2;
            end -= 2;
            $scope.displayList = [$scope.feedList[begin],$scope.feedList[end]];
            $scope.hideN = false;
        }
    }
    });
    // Page Code


    $scope.hideP = true;

    var begin = 0;
    var end = 2;



    // Display Content Code
    $scope.noCont = true;
    $scope.listClass = 'fullWidth';

    $scope.publish = function(cont) {
        $scope.noCont = false;
        $scope.htmlContent = $sce.trustAsHtml(cont);
        $scope.listClass = 'halfWidth';
    }
}]);

希望有所帮助。

AngularJS：从另一个数组中填充一个数组（创建页面）

1 个答案: