Angular modal: dynamically change modal content

Question

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? :)

Inside if condition use == to compare. if (type == 'type1') — ddepablo
– ddepablo, Commented Apr 18, 2016 at 9:32

Simon Schüpbach · Accepted Answer · 2016-04-18 09:54:24Z

2

There are two errors.

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

   resolve: {
        type: function() {
          return type;
        }
      }

You compare type strings with = instead of ==

If you change this two things, then it works.

edited Apr 18, 2016 at 9:54

answered Apr 18, 2016 at 9:41

Simon Schüpbach

1942 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohsin Muzawar · Accepted Answer · 2016-04-18 10:00:00Z

Change Your Controller To This

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
    angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {

      $scope.type = ['type1', 'type2'];

      $scope.animationsEnabled = true;

      $scope.open = function (size, type) {
        $scope.temp = type;
        var modalInstance = $uibModal.open({
          animation: $scope.animationsEnabled,
          template: "<div ng-include src=\"'myModalContent.html'\"></div>",
          controller: 'ModalInstanceCtrl',
          size: size,
          resolve: {
            type: function() {
              return $scope.temp;
            }
          }
        });

        modalInstance.result.then(function () {
          $log.info('Modal dismissed at: ' + new Date());
        });
      };

      $scope.toggleAnimation = function () {
        $scope.animationsEnabled = !$scope.animationsEnabled;
      };

    });

    // Please note that $uibModalInstance represents a modal window (instance) dependency.
    // It is not the same as the $uibModal service used above.

    angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, type) {
      $scope.type = type;
    alert(type);
      $scope.cancel = function () {
        $uibModalInstance.dismiss('cancel');
      };

      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;
      }

    });

Collectives™ on Stack Overflow

Angular modal: dynamically change modal content

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related