Show Modal depending on the selected value in dropdown list

Question

I have a dropdown list

  <select class="select" name="mode" ng-model="modes.mode" ng-dropdown required  >
   <option ng-option value="modal1">Mode1</option>
   <option ng-option value ="modal2">Mode2</option>
   <option ng-option value="modal3">Mode3</option>
  </select>

And three different buttons

 <button class="action_delete" id="delete" ngmodel="button" ng-click="delete()">Delete</button> 
 <button class="action_modify" id="modify" ngmodel="button"  ng-click="modify()">Modify</button>
 <button class="action_create" id="create" ng-model="button" ng-click="open()" >Add</button>

Now, what I want is to display modals on button click depending on the selected value in the dropdown list. Each mode has their own modals for button click. For example when the user selects mode1 and wants to add, the modal that will show is for mode1, add modal popup, for mode1, modify modal. If mode 2 has been selected, the modals will be for mode2, add modal; mode2, modify pop up and so on. How can I possibly do that? I'm using angularjs. Thanks for any help

Answer 1

You could simply define a modal template for each <option> value - modal1, modal2 ..

<script type="text/ng-template" id="modal1.html">
  <div class="modal-header">
    <h3 class="modal-title">modal1 - {{ action }}</h3>
  </div>
  <div class="modal-body">
    modal1
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
    <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
  </div>
</script>
...

See also the plnkr, notice {{ action }}. Create a function that opens a modal using the template that corresponds to the selected value

$scope.showModal = function(action) {
  if (!$scope.modes.mode) return
  $scope.action = action
  $scope.modal = $uibModal.open({
    templateUrl: $scope.modes.mode+'.html',
    scope: $scope
  });
} 

(using angular ui modals) Call showModal from the button ng-click handlers (action is just to demonstrate the template / button relationship)

$scope.delete = function() {
  $scope.showModal('delete')
}
...

But action can be useful in the mutual ok() and cancel() methods

$scope.ok = function() {
  //if ($scope.action == 'delete') { ... } 
  $scope.modal.close();
}
$scope.cancel = function() {
  $scope.modal.dismiss();
}

Consider the above as a minimal skeleton for showing different modals that each can be activated by different buttons.

See demo -> http://plnkr.co/edit/LYOEntdgLbONNAzH0Ove?p=preview