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，则模态将用于mode2，添加模态; 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处理程序调用{{1}}（ng-click只是为了演示模板/按钮关系）

action

但$scope.delete = function() { $scope.showModal('delete') } ...在共同的action和ok()方法中非常有用

cancel()

将上面视为最小骨架，用于显示不同的模态，每个模态可以通过不同的按钮激活。

参见演示 - ＆gt;的 http://plnkr.co/edit/LYOEntdgLbONNAzH0Ove?p=preview

根据下拉列表

1 个答案: