【问题标题】:ng-repeat shows only the last item from jsonng-repeat 仅显示 json 中的最后一项
【发布时间】:2015-05-12 14:17:26
【问题描述】:

如何使用 ng-repeat 从 JSON 中显示特定数量的项目。现在它只显示最后一项。

JSON

{  
   "list":{  
        "item": {
            "id":1,
            "img": "1.jpg",
            "user": "David Belle",
            "text": "Cum sociis natoque penatibus et magnis dis parturient montes"
        },
        "item": {
            "id":2,
            "img": "2.jpg",
            "user": "Jonathan Morris",
            "text": "Nunc quis diam diamurabitur at dolor elementum, dictum turpis vel"
        },
        "item": {
            "id":3,
            "img": "3.jpg",
            "user": "Fredric Mitchell Jr",
            "text": "Phasellus a ante et est ornare accumsan at vel magnauis blandit turpis at augue ultricies"
        }
    }
}

ANGULARJS

控制器

app.controller('mainCtrl', ['$scope', '$resource', function($scope, $resource) {
    $scope.msAPI = $resource("data/messages-notifications.json");
    $scope.msResult = $scope.msAPI.get();
}]);

HTML

<div ng-controller="mainCtrl">
    <a href="" ng-repeat="w in msResult.list">
         <div class="lv-title">{{ w.user }}</div>
         <small class="lv-small">{{ w.text }}</small>
    </a>
</div>

【问题讨论】:

    标签: javascript json angularjs angularjs-ng-repeat


    【解决方案1】:

    最简单的方法是更改​​ JSON 结构以包含数组(而不是对象),如下所示:

    {  
       "list": [{
            "id":1,
            "img": "1.jpg",
            "user": "David Belle",
            "text": "Cum sociis natoque penatibus et magnis dis parturient montes"
        }, {
            "id":2,
            "img": "2.jpg",
            "user": "Jonathan Morris",
            "text": "Nunc quis diam diamurabitur at dolor elementum, dictum turpis vel"
        }, {
            "id":3,
            "img": "3.jpg",
            "user": "Fredric Mitchell Jr",
            "text": "Phasellus a ante et est ornare accumsan at vel magnauis blandit turpis at augue ultricies"
        }]
    }
    

    【讨论】:

    • 哇,你太酷了。您能否还指导我显示特定数量的项目。非常感谢
    • slice 你的数组,例如"w in msResult.list.slice(0, 2)"
    猜你喜欢
    • 1970-01-01
    • 2016-11-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-09
    • 1970-01-01
    • 2019-05-18
    • 1970-01-01
    相关资源
    最近更新 更多