AngularでJSONオブジェクトをステップ実行

Question

配列の各オブジェクトをステップ実行するために必要な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" 
    } 
] 

Answer 1

あなたは、このための準備ができて、すべてのコードを持っている;）

あなたjsbinに固執したい場合はあなただけの

<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

代わりにNGリピートのこのビューの一部をしたい...

<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

はselectedItem用スコープ変数を設定し、コントローラにインデックス付けを行うことができます

$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 ]; 
}; 

ビューng-clickにページャーボタン設定選択した項目を作成したり、関数にitemを渡すと、コントローラで設定する

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

：

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