使用Angular遍历JSON对象
使用Angular遍历JSON对象
提问于 2016-10-11 23:30:07
我有一个JSON对象，我需要它能够遍历数组中的每个对象。我目前能够显示所有项目，但需要能够只显示加载的第一个项目。单击按钮时，它需要迭代到数组中的下一个对象，并且只显示下一个对象，依此类推。
作为此功能的一个示例：http://jsbin.com/veyegihogi/edit?html,js,output
当前设置：
JavaScript：
var app = angular.module('app', []);
app.controller('portfolioController', function($scope, $http) {
$scope.indexToShow = 0;
$http.get("shows.json")
.then(function(response) {
console.log(response);
$scope.results = response.data;
});
$scope.change = function(){
$scope.indexToShow = ($scope.indexToShow + 1) % $scope.results.length;
};
});标记：
<div id="images" ng-repeat="items in results">
<div class="col-lg-2 col-md-2 col-sm-2">
<img src="{{items.image_url}}" alt="{{items.title}}">
</div>
</div>
<div class="simple-button" ng-click="change()">click me!</div>示例数据：
[
{
"id": 1,
"title": "title 1",
"count": 14,
"image_url": "images/image.jpg"
},
{
"id": 2,
"title": "title 2",
"count": 10,
"image_url": "images/image2.jpg"
},
{
"id": 3,
"title": "title 3",
"count": 8,
"image_url": "images/image3.jpg"
}
]Stack Overflow用户
发布于 2016-10-11 23:34:14
您已经为此准备好了所有代码;)
您只需要这个视图部分，而不是ng-repeat
<div id="images">
<img src="{{results[indexToShow].image_url}}" alt="{{results[indexToShow].title}}">
</div>
<div class="simple-button" ng-click="change()">click me!</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39981037
复制相关文章
相似问题
腾讯云开发者
