显示模态取决于下拉列表中选择的值

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，添加模式;模式2，修改弹出等。我怎么可能做到这一点？我正在使用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）的模板打开一个模式的函数调用从按钮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