Ionic：如何從json文件中僅加載1張圖片？

Question

我已經設法將所有圖像從json文件加載到應用程序中，但我只希望加載1張圖像。 我正在使用ng-repeat，這就是為什么它會不斷重復。 我用ng-repeat替換什么，使其僅顯示第一個圖像？

這是我的代碼。

HTML：

<div ng-click="onClick()">
  <i class="ion-images"></i>
</div>
<a ng-controller="Ctrl">
  <ion-scroll direction="x">
    <img on-hold="onHold()" ng-repeat="image in data" ng-src="{{image.image}}" />
  </ion-scroll>
</a>

js：

.controller（“ Ctrl”，function（$ scope，$ http，$ ionicModal）{

$scope.data = [];

$http.get('')
  .success(function(data) {
    $scope.data = data;
    window.localStorage.setItem("images", JSON.stringify(data));
  })
});

Answer 1

如果只想顯示數組中的第一個元素，而沒有使用ng-repeater，則可以使用數組索引來訪問它，即：

ng-src="{{data.under9s[0].image}}

請在下面查看工作演示：

 var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope, $http) { $scope.data = []; $http.get('https://api.myjson.com/bins/4tutm') .success(function(data) { $scope.data = data; window.localStorage.setItem("images", JSON.stringify(data)); }) .error(function(error) { if (window.localStorage.getItem("images") !== undefined) { $scope.data = JSON.parse(window.localStorage.getItem("images")); } }); });

 <!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script> document.write('<base href="' + document.location + '" />'); </script> <link rel="stylesheet" href="style.css" /> <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script> <script src="app.js"></script> </head> <body ng-controller="MainCtrl"> <p>Hello {{name}}!</p> <ion-scroll direction="x"> <img on-hold="onHold()" ng-src="{{data.under9s[0].image}}" ng-click="showImages($index)" class="image-list-thumb" /> </ion-scroll> </body> </html>

Ionic：如何從json文件中僅加載1張圖片？

問題描述

1 個解決方案

解決方案1
1 已采納 2015-08-09 21:25:27

Ionic：如何從json文件中僅加載1張圖片？

問題描述

1 個解決方案

解決方案1 1 已采納 2015-08-09 21:25:27

解決方案1
1 已采納 2015-08-09 21:25:27