根据下拉列表中的选定值显示模态

Question

我有一个下拉列表

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

还有三个不同的按钮

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

现在，我想要的是根据下拉列表中的选定值在按钮单击时显示模式。每种模式都有自己的按钮点击模式。例如当用户选择mode1并想要添加时，将显示的modal是mode1，添加modal popup，对于mode1，modify modal。如果选择了模式2，模态框会为模式2，添加模态框； mode2，修改弹窗等。我怎么可能那样做？我正在使用 angularjs。感谢您的帮助

Answer 1

您可以简单地为每个 <option> 值定义一个模态模板 - 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>
...

另见 plnkr，注意 {{ action }}。使用与所选值对应的模板创建一个打开模态的函数

$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) 从按钮 ng-click 处理程序调用 showModal (action 只是为了演示模板/按钮关系)

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

但是 action 在相互 ok() 和 cancel() 方法中很有用

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

将以上内容视为显示不同模式的最小框架，每个模式都可以通过不同的按钮激活。

查看演示 -> http://plnkr.co/edit/LYOEntdgLbONNAzH0Ove?p=preview

根据下拉列表中的选定值显示模态

Show Modal depending on the selected value in dropdown list

javascript

select

modal-dialog

dropdownbox

angularjs