用Angular穿越JSON對象

我有一個JSON對象，我需要能夠遍歷數組中的每個對象。我目前能夠顯示所有項目，但需要能夠僅顯示第一個負載。在按鈕單擊時，它需要迭代到數組中的下一個對象，並僅顯示下一個對象，等等。用Angular穿越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" 
    } 
]

來源

2016-10-11 user3438917

我沒有看到在'NG-click'你的標記？另外'product_image_url'不匹配它的對象'image_url'此外......我沒有理由在你的'$ http.get（）' –

裏面有'$ scope.change'也是ng-repeat的一個要求，如果它真的的話只是假設顯示下一個點擊？ – defaultcheckbox

'src =「{{items [indexToShow] .product_image_url}}」'並刪除ng-repeat。這似乎很明顯！這是什麼讓你感到困惑？ – sabithpocker

你把所有的代碼爲此做好準備;）

你只是想這個觀點部分，而不是你的NG-重複

<div id="images"> 
     <img src="{{results[indexToShow].image_url}}" alt="{{results[indexToShow].title}}"> 
</div> 
<div class="simple-button" ng-click="change()">click me!</div>

來源

2016-10-11 15:34:13

這就是我一直在尋找的，謝謝！我忘記添加到原始問題的部分問題是添加一個按鈕，以顯示數組中每個對象，位於主圖像區域下方，其中每個對象都具有單擊時應顯示的圖像的ID。 – user3438917

我不確定明白你想要什麼？ –

因此，對於json文件中的每個可用對象，應該在當前顯示的項目下面有按鈕。當你點擊一個，它會顯示來自該ID的相應內容。因此，不是單個「下一個」按鈕，而是每個可用項目的按鈕。 – user3438917

如果要堅持你的jsbin ...

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

來源

2016-10-11 15:36:29 defaultcheckbox

只要刪除ng重複...沒有任何意義。 –

我知道，但我不確定中繼器是否有些奇怪的要求（請參閱我上面的評論），所以我以與引用的jsbin相同的方式爲中繼器提供瞭解決方案。 – defaultcheckbox

可以設置一個範圍變量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 ]; 
};

查看

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

要ng-click創建導航按鈕設置所選項目或通過item的功能，並將其設置在控制器：

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

來源

2016-10-11 15:53:23 charlietfl

用Angular穿越JSON對象

回答

相關問題