Question

我在下面的代码中工作正常，但是当我在Td tab和AngularJS中使用此代码时。它不起作用。

我的AngularJS代码。它没有用，我想在div id="big-image"点击历史图片之一时显示图片

<div class="table-responsive">
   <table class="table table-bordered table-striped table-hover table-condensed mb-none dataTable no-footer" role="grid">
      <thead>
         <tr>
            <th>Update Image</th>
            <th>Date</th>
         </tr>
      </thead>
      <tbody class="gradeX">
         <tr ng-repeat="history in joblistCtrl.current_job.history">
            <td>
               <div class="small-images">
                  <a href="{{history.image_path}}">
                  <img src={{history.image_path}} />
                  </a>
               </div>
            </td>
            <td>{{history.datetime | date:'medium'}}</td>
         </tr>
      </tbody>
   </table>
   <div id="big-image">
      <img src="">
   </div>
</div>
<script type="text/javascript">
$(function(){
   $(".small-images a").click(function(e){
        var href = $(this).attr("href");
        $("#big-image img").attr("src", href);
        e.preventDefault();
        return false;
   });
});
</script>

Answer 1

您可以通过ng-click将图像路径设置为变量，因为我使用了调用largeImage，然后将其设置为大图像。另外，不要忘记为初始加载添加ng-init。

<img ng-init="largeImage=joblistCtrl.current_job.history[0].image_path" ng-click="largeImage=history.image_path" src={{history.image_path}} class="certificate_smallimage" />


<div id="big-image">
    <img ng-src="'largeImage'">
</div>

如何使用Bootstrap或AngularJS显示大图像

1 个答案: