在ajax请求之后,sortby不适用于angularjs

时间:2015-12-22 10:46:58

标签: angularjs ajax

ajax成功地提取数据,但排序功能似乎无法正常工作。

alive:http://weijinglin.name/website/

        var ngApp = angular.module("webApp", ['xml'])
        .config(function ($httpProvider) {
            $httpProvider.interceptors.push('xmlHttpInterceptor');
          })
        .controller("webCtrl", function($scope, $http) {
            $scope.websites = [];
            $http.get("./data/web.json")
            .success(function(response) {
                $scope.websites = response;

                for (i = 0; i < $scope.websites.length; i++) {
                    $scope.processWebsite($scope.websites[i], i);
                }
                //console.log(response);
            });

这是函数处理数组

            $scope.processWebsite = function(website, index){
                //for ($scope.i = 0; $scope.i < $scope.websites.length; $scope.i++){
                    $http.get('../api/index.php/alexa?url=' + website.url)
                    .success(function(rsp) {
                        //$scope.websites[index].rank = rsp.data.POPULARITY.TEXT;
                        if (rsp.data && rsp.data.POPULARITY.TEXT) {
                            $scope.websites[index].rank = rsp.data.POPULARITY.TEXT;
                        } else {
                            $scope.websites[index].rank = 'NO DATA';
                        }
                        console.log();
                    });
                //}
            }
        });

我使用过滤器

对数据进行排序
<tr ng-repeat="x in websites | orderBy:sortType:sortReverse">
                <td>{{ x.cate }}</td>
                <td>{{ x.title }}</td>
                <td>{{ x.url }}</td>
                <td>{{ x.rank }}</td>
            </tr>

我使用th作为开关按钮来进行可切换的

<th>
    <a href="#" ng-click="sortType='rank'; sortReverse= !sortReverse">Alex
        <i ng-show="sortType = 'rank' && sortReverse" class="glyphicon glyphicon-chevron-up"></i>
        <i ng-show="sortType = 'rank' && !sortReverse" class="glyphicon glyphicon-chevron-down"></i>
    </a>
</th>

1 个答案:

答案 0 :(得分:0)

您确定可以成功获取所有数据吗?或者可能是你在get方法完成之前进行了排序?

我认为你应该在//copy template var mDocDrive = doc.makeCopy(title, folder); var mDoc = DocumentApp.openById(mDocDrive.getId()); var mDocDriveApp = DriveApp.getFileById(mDoc.getId()); var docToAttach = mDoc.getUrl(); var driveToShare = mDocDriveApp; // replace text inside template var body = mDoc.getBody(); body.replaceText("<<SS Title>>", title); body.replaceText("<<timestamp>>", lastR.timestamp); body.replaceText("<<username>>", lastR.email); for (i in lastR.theResponses){ var cur = lastR.theResponses[i]; var name = cur.title; name = name.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); // this will allow fields that include special characters. var response = cur.response; var searchPattern = "<<"+name+">>"; body.replaceText(searchPattern, response); } // this will replace any unused tags with nothing. var ques = getQuestionList(); for (j in ques){ var curq = ques[j].name; curq = curq.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); var searchPattern2 = "<<"+curq+">>"; body.replaceText(searchPattern2, ""); } mDoc.saveAndClose(); //create pdf if (mmDefaults.shareAs == "pdf"){ // uncomment if you want to make the pdf in the merge folder var asPdf = mDoc.getAs('application/pdf'); asPdf.setName(mDoc.getName()+ ".pdf"); var pdf = DriveApp.createFile(asPdf); folder.addFile(pdf); DriveApp.removeFile(pdf); mDocDriveApp.setTrashed(true); var docToAttach = pdf; driveToShare = pdf; } 函数中包装你的成功(回调)。然后,当响应准备就绪时,您的排序方法将被调用为异步。我假设.then正在对响应进行排序。

$scope.processWebsite

Angular的var myurl = '../api/index.php/alexa?url=' + website.url; $http.get('myurl').then( function successCallback(response) { // on success if (rsp.data && rsp.data.POPULARITY.TEXT) { $scope.websites[index].rank = rsp.data.POPULARITY.TEXT; } else { $scope.websites[index].rank = 'NO DATA'; } console.log(); }, function errorCallback(response) { // on error console.log(); } }); documentation声明:

  

$ http遗留承诺方法成功与错误   弃用。请改用标准方法。如果   $ httpProvider.useLegacyPromiseExtensions设置为false然后这些   方法将抛出$ http / legacy错误。

请注意,此代码尚未实施或测试,但应为您提供大纲。