AngularJS http.get html 列表总是最后一个图像

Question

我正在尝试将产品图片带到另一个带有产品编号的表格

但是，产品被列出，而图像始终是数组中的最后一项

Click for screen shot

我的 Angular 控制器：

.controller('anasayfaCtrl', ['$scope', '$stateParams','$http',
function ($scope, $stateParams,$http) {
	$scope.urunler=[];
	$scope.urunGetir=function(){
		$http.get("http://www.elli2.com/mobil/urunler").then(function(response){
			$scope.urunler=response.data;
			
		})
	}
$scope.data=[];
		 $scope.gorsel=function(id){
			$scope.data =$http({
		    method: 'GET',
		    url: 'http://www.elli2.com/mobil/urunGorsel/'+id
	  }).success(function(response){
		return "url/"+response.urun_gorsel;
	  });		
console.log($scope.data);
	}
}])

我的 HTML：

<div ng-init="urunGetir()" >  
      <ion-item ng-repeat="urun in urunler" class="item-thumbnail-left positive" id="anasayfa-list-item5" href-inappbrowser="/urundetay">
        <img ng-src="{{ urunGorsel }}" ng-init="gorsel(urun.urun_id)">
        <h2positive>{{ urun.urun_adi }} 
          <p style="white-space:normal; font-weight: bold;">Fiyat: <span style="color:blue">{{ urun.urun_fiyati }} </span></p>
          <ion-option-button class="button-positive"></ion-option-button>
        </h2positive>
      </ion-item>
    </div>

我在等你的帮助

Answer 1

我认为您需要将 http 响应分配给 ng-init 内的变量

<ion-item ng-repeat="urun in urunler" class="item-thumbnail-left positive" id="anasayfa-list-item5" href-inappbrowser="/urundetay">
        <img ng-src="{{ urun.urunGorsel }}" ng-init="urun.urunGorsel = gorsel(urun.urun_id)">
        <h2positive>{{ urun.urun_adi }} 
          <p style="white-space:normal; font-weight: bold;">Fiyat: <span style="color:blue">{{ urun.urun_fiyati }} </span></p>
          <ion-option-button class="button-positive"></ion-option-button>
        </h2positive>
</ion-item>

Answer 2

除了$scope 属性名称不匹配（urunGorsel 而不是data）之外，您的代码中的问题是您发出多个请求但只存储在一个变量中。此外，您只存储 promise 而不是它的结果。你应该有类似的东西：

$scope.data = [];
$scope.gorsel = function (id) {
    $http({
        method: 'GET',
        url: 'http://www.elli2.com/mobil/urunGorsel/'+id
    }).success(function (response) {
        $scope.data[id] = "url/"+response.urun_gorsel; // Store each image
}); 

然后，在您的 HTML 中：

<img ng-src="{{ urun.data[urun_id] }}" ng-init="gorsel(urun.urun_id)">

当然，您可能需要缓存结果等，但这可以帮助您继续前进。

Answer 3

function anasayfaCtrl($scope, $http) { // home controller
  $scope.urunler = []; // products

  function handleError(res) {
    console.log(res.data);
  }

  $scope.urunGetir = function() { // get products
    return $http.get('http://www.elli2.com/mobil/urunler').then(function(res) {
      return res.data;
    }, handleError);
  };

  $scope.gorselGetir = function(urun_id) { // get image ?
    return $http.get('http://www.elli2.com/mobil/urunGorsel/' + urun_id).then(function(res) {
      return res.data;
    }, handleError);
  };

  // initialize products
  $scope.urunGetir().then(function(urunler) { // init get products
    $scope.urunler = urunler;

    // store products image url in $scope.urunler[x].gorsel_url;

    // initialize each products image url
    $scope.urunler.forEach(function(urun) {
      // urun -> product ?
      $scope.gorselGetir(urun.urun_id).then(function(gorsel) {
        urun.gorsel_url = 'http://www.elli2.com/img_gorsel_/urunler/' + gorsel.urun_gorsel;
      });
    });
  });
}

<div ng-controller="anasayfaCtrl">  
  <ion-item ng-repeat="urun in urunler" class="item-thumbnail-left positive" id="anasayfa-list-item5" href-inappbrowser="/urundetay">
    <img ng-src="{{ urun.gorsel_url }}">
    <h2positive>{{ urun.urun_adi }} 
      <p style="white-space:normal; font-weight: bold;">Fiyat: <span style="color:blue">{{ urun.urun_fiyati }} </span></p>
      <ion-option-button class="button-positive"></ion-option-button>
    </h2positive>
  </ion-item>
</div>