Durch JSON-Objekt mit Angular

Question

Ich habe ein JSON-Objekt, das ich durch jedes Objekt im Array durchlaufen müssen. Ich bin derzeit in der Lage, alle Gegenstände zu zeigen, muss aber nur die erste beim Laden zeigen können. Beim Klicken auf die Schaltfläche muss zum nächsten Objekt im Array iteriert werden, und nur das nächste Objekt wird angezeigt, und so weiter.

Als Beispiel für diese Funktionalität: http://jsbin.com/veyegihogi/edit?html,js,output

Das aktuelle Setup:

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; 
    }; 
}); 

Markup:

<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> 

Beispieldaten:

[ 
    { 
    "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" 
    } 
] 

Answer 1

Sie haben alle den Code bereit dafür;)

Sie wollen einfach nur diese Ansicht Teil statt Ihrer 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> 

Answer 2

Wenn Sie mit Ihrem jsbin haften möchten ...

<div id="images" ng-repeat="item in results track by $index" ng-show="$index == indexToShow"> 
     <div class="col-lg-2 col-md-2 col-sm-2"> 
      <img src="{{item.image_url}}" alt="{{item.title}}"> 
     </div> 
</div> 
<div class="simple-button" ng-click="change()">click me!</div> 

Answer 3

Kann einen Bereich Variable für selectedItem gesetzt und tun, um die Indizierung in Controller

$scope.results = response.data; 
$scope.selectedItem = $scope.results[0]; 

$scope.change = function(){ 
    var currIdx = $scope.results.indexOf($scope.selectedItem), 
     nextIdx = currIdx+1 <= $scope.results.length-1 ? currIdx+1 : 0; 

    $scope.selectedItem=$scope.results[nextIdx ]; 
}; 

Ansicht

<img src="{{selectedItem.product_image_url}}"...> 

Um Pager-Tasten eingestellt ausgewähltes Element in ng-click oder gibt item auf eine Funktion, und legen Sie es in der Steuerung zu erstellen:

<span ng-repeat="item in results" 
     ng-class="{active: item == selectedItem}}" 
     ng-click="selectedItem = item">{{$index+1}}</span>