CODEWITHSUNDEEP
angularjs
Miguel Moura
Miguel Moura

Reputation: 39364

Popup a dialog with information from list

I have the following Html / Angular to display a list of images and a vote option.

<div data-ng-app="Application" data-ng-controller="ImageController">
  <div data-ng-repeat='image in model.images'>
    <img src="{{image.Url}}" alt=""/>
    <div class="vote">
      <a href="" data-ng-click="vote(image)"><i class="icon-vote"></i></a>
      <span>{{image.Votes}}</span>
    </div>
  </div>
</div>

When a user clicks the image I want it to open in a dialog.

I need to display the image, and the vote functionality so based in:

{{image.Url}}, data-ng-click="vote(image)" and {{image.Votes}}

I also need to display icons to share the image (facebook, twitter, ...) where the link is created based on {{image.Url}}.

Can someone advise me on the best way to do this? Maybe using a module?

I am not sure how to carry the data in {{image.Url}}, ... to a dialog with a specific HTML markup.

Upvotes: 0

Views: 943

Answers (1)

Peter Ashwell
Peter Ashwell

Reputation: 4302

Best starting point would be to look at angular-modal https://github.com/btford/angular-modal

Have a look at addthis for the sharing features, that will be pretty easy.

====

Here is a working plunkr (except the modal styles did not apply) using angular-modal

http://plnkr.co/edit/KfkVbbxfApF8xrDkeLmb?p=preview

Here is the relevant code

  $scope.popModalForImage = function(index) {
    if (modal) {
      modal.deactivate();
    }
    modal = btfModal({
      controller: function() {
        this.image = $scope.images[index];
        this.vote = function() {
          $scope.images[index].votes += 1;
          modal.deactivate();
        }
        this.closeMe = function() {
          modal.deactivate();
        }
      },
      controllerAs: 'ctrl',
      template: '<div class="btf-modal">' +
                '   <button ng-click="ctrl.closeMe()">close me</button>' +
                '   <button ng-click="ctrl.vote()">vote for {{ctrl.image.name}}</button> <br />' +
                '   <img src="{{ctrl.image.url}}">' +
                '   <p>Total votes: {{ctrl.image.votes}}</p>' +
                '</div>'
    });
    modal.activate();

And the template:

<p ng-repeat="image in images">
  <a href="#" ng-click="popModalForImage($index)">{{image.name}}</a>
  (votes: {{image.votes}})
</p>

Upvotes: 1

Related Questions