Question

我想从JSON数据库中提取图像以在图像滑块中显示它。 JSON是： -

{ "items" : [ { "img": "img/product1.JPG", "alt" : "Image 1" }, { "img": "img/product2.JPG", "alt" : "Image 2" }, { "img": "img/product3.JPG", "alt" : "Image 3" }, { "img": "img/product4.JPG", "alt" : "Image 4" }, { "img": "img/product5.JPG", "alt" : "Image 5" }, { "img": "img/product6.JPG", "alt" : "Image 6" } ] }

html： -

<div id="image_slider" class="img_slider">
     <img src={{items}} />
</div>

CSS： - #image_slider .item{ padding: 30px 0px; background: #a1def8; display: block; margin: 5px; color: #FFF; border-radius: 3px; text-align: center; }

控制器： - 这是jquery code.I想要转换AngularJs中的代码。我是angular的新手。所以有人可以帮助我吗？

//$scope.document.ready(function($scope) {
 app.directive('image_slide', function($scope) {

     $scope.document.ready(function($scope) {
  ("#image_slider").img_slider({
    jsonPath : 'data/imageSlider.json',
    jsonSuccess : customDataSuccess
  });

  function customDataSuccess(data){
    var content = "";
    for(var i in data["items"]){

       var imgs = data["items"][i].imgs;
       //var alt = data["items"][i].alt;

       content += "<img src=" + "" +imgs+ "/>";
      /* <img src="img/product1.JPG"/>*/
    }
    $("#image_slider").html(content);
  }
});

}）;

Answer 1

您需要在此使用的概念是$http和ng-repeat。

例如，您可以像这样获取数据：

$http.get('data/imageSlider.json')
  .success(function(data, status, headers, config) {
    $scope.images = data.items;
  });

然后你就这样显示：

<img ng-repeat="image in images" ng-src="{{image.img}}" alt="{{image.alt}}" />

这里是full example on Plunker。

如何在不使用休息的情况下将图像从json拉到角度js中的html？

1 个答案: