AngularJS http.get html列表总是最后一张图片

时间:2017-05-31 12:52:30

标签: javascript angularjs ionic-framework

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

的表格中

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

Click for screen shot

My Angular Controller:



.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>
&#13;
&#13;
&#13;

我在等你的帮助

3 个答案:

答案 0 :(得分:0)

我认为您需要将http响应分配给bool b1 = Nullable<int>.Equals(1, 2); //no error bool b2 = int?.Equals(1, 2); //syntax error "Invalid expression term 'int'"

中的变量
ng-init

答案 1 :(得分:0)

除了$scope属性名称不匹配(urunGorsel而不是data)之外,代码中的问题是您正在发出多个请求但只存储在一个变量中。此外,您只存储承诺而不是其结果。你应该有类似的东西:

$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)">

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

答案 2 :(得分:0)

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>