Question

我已经在cloudinary中存储了图标。在这里我使用ng-repeat列出商店一切正常工作，但图标不显示我已经附上我的html和控制器代码。我有这样的图标http://res.cloudinary.com/ ******* / icon1.png， http://res.cloudinary.com/icon2.png,http://res.cloudinary.com/icon3.png

angular.module('test', [])
  .controller('TestController', ['$scope','$filter','$http',
      function($scope, $filter,$http) {
        
         $http.get('****').success(function(data, dealers, response) {
           
           $scope.dealers = data;
           console.log(data.icons);
           
           });
      
  }]);
//console i am getting icons like this
"http://res.cloudinary.com/*******/icon1.png,http://res.cloudinary.com/icon2.png,http://res.cloudinary.com/icon3.png"

<div class="list card"  data-ng-repeat="dealer in dealers | filter:query ">
 <img ng-src="{{dealer.icons}}" ></img> 
</div>

Answer 1

你提到了：

//console i am getting icons like this    "http://res.cloudinary.com/*******/icon1.png,http://res.cloudinary.com/icon2.png,http://res.cloudinary.com/icon3.png"

它是一个字符串。而你不能迭代字符串。您需要将其转换为数组然后迭代它。

使用split(",")将字符串转换为数组。 Learn more here

更改此行：

$scope.dealers = data;

要：

$scope.dealers = data.icons.split(",");

旁注：

Img是一个自我结束的标签。纠正它：

<img src="" />

Answer 2

您需要先将data.icons转换为数组：

$scope.dealers = data.icons.split(',');

然后：

<div class="list card" data-ng-repeat="dealer in dealers | filter:query">
  <img ng-src="dealer"/>
</div>

没有显示ng-repeat with image？

2 个答案: