orderBy过滤器没有动态添加ng-repeat列表

时间:2014-05-27 18:21:15

标签: javascript angularjs asynchronous

当我将内容动态添加到数组时,ng-repeat将不会遵循orderBy过滤器。

请查看我创建的示例: http://jsfiddle.net/fPX7R/2/

<script>
    function RedditAuthor (name) {
        this.name = name;
    } 
    var redditPostUrl = 'http://www.reddit.com/r/learnprogramming/comments/26lfww/python_why_does_10_2_100_and_not_100.json';
    var huebelApp = angular.module('huebelApp', []);
    huebelApp.controller('LightCtrl', function ($scope, $http) {
        $scope.authors = [];
        $http.get(redditPostUrl).success(function(postData) {
            for (var i=0; i<postData[1].data.children.length; ++i) {
                var commentId = postData[1].data.children[i].data.id;
                $http.get(redditPostUrl+'/'+commentId+'.json').success(function(commentData){
                    var authorName = commentData[1].data.children[0].data.author;
                    $scope.authors.push(new RedditAuthor(''+authorName));
                });
            };
        });
    });
</script>
<body ng-app="huebelApp" ng-controller="LightCtrl">
    <div class="row" ng-repeat="author in authors | orderBy:name">
        <span>{{author.name}}</span>
    </div>
</body> 

在此示例中,我查询reddit帖子并为每个顶级评论发出查询。然后将注释查询的结果添加到ng-repeat显示的数组中。但是订单没有保留。

当动态添加内容时,如何判断angular是否尊重过滤器并对列表进行排序?

1 个答案:

答案 0 :(得分:4)

orderBy缺少引号......

<body ng-app="huebelApp" ng-controller="LightCtrl">
    <div class="row" ng-repeat="author in authors | orderBy:'name'">
        <span>{{author.name}}</span>
    </div>
</body>

Updated Fiddle