передать данные модальному из ответа restFul - PullRequest
Новая
       4

передать данные модальному из ответа restFul

0 голосов
/ 25 мая 2019

Я могу передать img url модалу, но не могу понять, как передать img.title и, в конечном итоге, img.context.Я получаю хороший ответ от API. Мне просто нужна помощь в передаче результатов в модальное меню после его нажатия.Я могу получить URL-адрес изображения, но не image.title.

ниже jquery: 

<script>
  $(document).ready(function () {
    $(document).on("click", ".openImageDialog", function () {

    var myImageId = this.id;
    $(".modal-body #myImage").attr("src", myImageId);
    console.log("src " + this.id)
    console.log(this);
  });
});
</script>

HTML: 

  <div *ngFor="let image of childPhotos">
    <div class="gallery">
      <a href="#gardenImage" data-id={{image.url}} class="openImageDialog thumbnail" data-toggle="modal">
        <img class="img-responsive" src={{image.url}} alt={{image.title}}>
      </a>
      <div class="desc">{{image.title}}</div>
    </div>
  </div>

  <div class="modal" id="gardenImage" tabindex="-1" role="dialog">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
              <img class="img-responsive img-fluid" id="myImage" src="" alt="">
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

1 Ответ

0 голосов
/ 26 мая 2019

разобрался. Просто нужно добавить данные в один и тот же элемент. 

<div *ngFor="let image of childPhotos">
  <div class="gallery">
    <a href="#gardenImage" data-id={{image.url}} data-title={{image.title}} class="openImageDialog thumbnail" data-toggle="modal">
      <img class="img-responsive" src={{image.url}} alt={{image.title}}>
      <div class="hidden" data-title={{image.title}}></div>
    </a>
    <div class="desc">{{image.title}}</div>
  </div>
</div>

  <script>
    $(document).ready(function () {
      $(document).on("click", ".openImageDialog", function () {

        console.log(this);

        var myImageId = this.id;
        var myTitleId = this.title;

        console.log("myTitle " + myTitleId);

        $(".modal-body #myImage").attr("src", myImageId);
        $(".modal-title").text(myTitleId);
        console.log("src " + this.id)
        console.log(this);
      });
    });
  </script>
...