Question

我是angularjs的新手，我需要在点击缩略图时显示图像。我想显示它的预览图片。它将在我的数据库中获取。

我在mysql上的数据库表是这样的：

材料：{ [名：＆＃39; material1＆＃39 ;, 缩略图：＆＃39; thumbnail1＆＃39 ;, 预览：＆＃39; preview1＆＃39]，

[名：＆＃39;材料2＆＃39 ;, 缩略图：＆＃39; thumbnail2＆＃39 ;, 预览：＆＃39; preview2＆＃39;] }

我也使用Laravel作为我的后端框架。材料列表现在显示但是当我点击缩略图时，预览图像没有显示。有什么办法可以解决这个问题吗？

＆＃13;

var imageCtrl = function($scope, $http) {

  $scope.materials = [];
  $scope.init = function(){
    $http.get('api/materials').
    success(function(data, status, headers, config){
      $scope.materials = data;
    });
  }

  $scope.loadimage = function() {
    $scope.image.path = $scope.materials.preview;
  }
};

app.controller('imageCtrl', imageCtrl);

＆＃13;

<div ng-controller="imageCtrl">
  <ul>
    <li ng-repeat='material in materials'>
      <div>@{{material.name}}</div>
      <a href=""><img ng-src="@{{material.thumbnail}}" alt="" ng-click="loadimage()></a>
    </li>
  </ul>
  <img ng-src="@{{image.path}}" alt="">
</div>

＆＃13;

Answer 1

在html页面上，将当前材质对象传递给loadImage函数。

<div ng-controller="imageCtrl"> <ul> <li ng-repeat='material in materials'> <div>{{material.name}}</div> <img ng-src="{{material.thumbnail}}" ng-click="loadimage(material)> </li> </ul> <img ng-src="{{image.path}}" alt=""> </div>

然后从控制器内部更新图像对象。

 $scope.loadimage = function(material) {
   $scope.image.path = $scope.material.preview;
 }

在Angularjs上加载动态图像

1 个答案: