顯示模態取決於下拉列表中選擇的值

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