CODEWITHSUNDEEP
angularjsangular-uiangular-ui-modal
kipris
kipris

Reputation: 3039

Angular modal: dynamically change modal content

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

Upvotes: 3

Views: 8458

Answers (2)

Mohsin Muzawar
Mohsin Muzawar

Reputation: 1212

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

    });

Upvotes: 1

Simon Sch&#252;pbach
Simon Sch&#252;pbach

Reputation: 194

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.

Upvotes: 2

Related Questions