Angular modal: dynamically change modal content

kipris picture kipris · Apr 18, 2016 · Viewed 7.4k times · Source

I tried my modal content change if I add type parameter to button click event.

    <button type="button" class="btn btn-default" ng-click="open('lg', 'type1')">Large modal</button>
    <button type="button" class="btn btn-default" ng-click="open('sm', 'type2')">Small modal</button>

So, if I chose type1 modal or type2 modal, content doesn't change accordingly, modal content change only to type2. I do it such way in my script:

  var titleType1 = "Type 1 Title";
  var titleType2 = "Type 2 Title";
  var contentType1 = "Type 1 Content";
  var contentType2 = "Type 2 Content";

  if (type = 'type1') {  
  $scope.modalTitle = titleType1;
  $scope.modalContent = contentType1;
  }
  if (type = 'type2') {
    $scope.modalTitle = titleType2;
    $scope.modalContent = contentType2;
  }

http://plnkr.co/edit/9VWvsPw4PzflKZDII5H0?p=preview

Any idea how it can be fixed? :)

Answer

Simon Sch&#252;pbach picture Simon Schüpbach · Apr 18, 2016

There are two errors.

1. You send the whole type array as parameter not just the selcted type.

   resolve: {
        type: function() {
          return type;
        }
      }
  1. You compare type strings with = instead of ==

If you change this two things, then it works.