ng-repeat:每隔一个值错误地显示为空白。

时间:2017-04-22 20:52:00

标签: angularjs angularjs-ng-repeat elements empty-list

我的json的(为了便于阅读而编辑)版本看起来像这样。

它实际上是json形式的reddit首页:

{
    "kind": "Listing",
    "data": {
        "modhash": "fb7jljbeer6a0dbec0b7b939c890078b5a92d221b3e2b31cec",
        "children": [
            {
                "kind": "t3",
                "data": {
                    "subreddit": "gifs",
                    "id": "66wssv",
                    "author": "GuacamoleFanatic",
                    "name": "t3_66wssv",
                    "subreddit_name_prefixed": "r/gifs",
                    "domain": "gfycat.com",
                    "thumbnail": "https://b.thumbs.redditmedia.com/E4FB3khTGQ_D8KP-P7KEVXpB9MzY_XDWUhtPmGnNOuE.jpg",
                    "subreddit_id": "t5_2qt55",
                    "permalink": "/r/gifs/comments/66wssv/8_year_old_tillys_first_couple_of_seconds_wearing/",
                    "url": "https://gfycat.com/VacantRequiredAmethystinepython",
                    "title": "8 year old Tilly's first couple of seconds wearing a bionic hand.",
                    "created_utc": 1492877987,
                    "num_comments": 504,
                }
            },
            {
                "kind": "t3",
                "data": {
                    "subreddit": "IAmA",
                    "id": "66wut7",
                    "author": "JoergS",
                    "name": "t3_66wut7",
                    "subreddit_name_prefixed": "r/IAmA",
                    "domain": "self.IAmA",
                    "thumbnail": "self",
                    "subreddit_id": "t5_2qzb6",
                    "permalink": "/r/IAmA/comments/66wut7/iama_jörg_sprave_the_bald_crazy_german_who_runs/",
                    "url": "https://www.reddit.com/r/IAmA/comments/66wut7/iama_jörg_sprave_the_bald_crazy_german_who_runs/",
                    "title": "IamA (Jörg Sprave, the bald crazy German who runs \"The Slingshot Channel\" on YouTube.) AMA!",
                    "created_utc": 1492878607,
                    "num_comments": 781,
                }
            },

控制器非常简单:

angular.module('redditdupe').controller('frontPage', ['$scope', '$http', '$routeParams',
function frontPage($scope, $http){

$http({
  method: 'GET',
  url: 'https://www.reddit.com/.json'
})
.
then(
        function successCallback(response) 
        {          
            $scope.children=response.data.data.children;
        }
        , 
        function errorCallback(response) {

        }
    );

}]);

html也是如此:

<div class="cartouche" ng-repeat="child in children">
    <div ng-repeat="data in child">             
        <img src="{{ data.thumbnail }}"><br> 
        <a href="{{ data.url }}">{{ data.title }}</a> ({{ data.domain }})<br>              
        {{ data.created_utc * 1000 | date:'yyyy-MM-dd HH:mm:ss Z' }} <a href="https://www.reddit.com/user/{{data.author}}">{{data.author}}</a>  <a href="#/{{ data.subreddit_name_prefixed }}">{{ data.subreddit_name_prefixed }}</a><br>
        <a href="#/com/{{ data.subreddit_name_prefixed }}/comments/{{ data.id }}/.json">{{ data.num_comments }}</a><br>
    </div>
</div> 

然而,ng-repeat显示

  • 一组空白结果,然后是
  • 一组真实的结果,
  • 后面是另一个空白集,
  • 接着是另一个真实的集合
  • ......等等

像这样:

  <--- blank line
()  <--- probably the domain gfycat.com, except it's blank
null < --- dunno
    <--- probably the comment count, but is blank line

8 year old Tilly's first couple of seconds wearing a bionic hand. (gfycat.com)
2017-04-22 09:19:47 -0700 GuacamoleFanatic r/gifs
1959

()  <--- then the same shenanigans again
null 


Seen at the March for Science (i.redd.it)
2017-04-22 09:45:18 -0700 Polymathyx r/pics
338

我已经google了很多,这似乎不符合“消费周期”的解释,因为并不是整个集合按顺序显示一次,然后两次。

这是每个元素单独循环两次,先填空,然后填写。

我已经把头撞在桌子上好几天了。

原因是什么,更重要的是,请问解决方案是什么?

非常感谢任何建议。

0 个答案:

没有答案