angularjs http.get html列表始终是最后一个图像

Question

我试图将产品图像带到带有产品编号

的另一个表格

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

单击屏幕截图

我的角控制器：

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