javascript - 根据下拉列表中所选的值显示模态

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并想要添加时，将显示的模态是针对mode1，添加模态弹出窗口，针对mode1，修改模态。如果选择了模式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
  });
} 

(使用 angular ui modals )调用 showModal从按钮ng-click处理程序( 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