在角度材質對話模式中使用表格

Question

我正在使用角度材質來管理我的模態系統，我會將表單放入模式並在驗證後獲取值。

這是我的一個簡單的模式代碼：

.factory('modalService', ['$mdDialog', function($mdDialog) { 
     var modalService = {}; 
     modalService.alert = function(title, message, ev) { 
     $mdDialog.show(
      $mdDialog.alert() 
      .parent(angular.element(document.querySelector('#popupContainer'))) 
      .clickOutsideToClose(true) 
      .title(title) 
      .textContent(message) 
      .ariaLabel('Alert Dialog Demo') 
      .ok('OK') 
      .targetEvent(ev) 
     ); 
     }; 
     return modalService; 
    }]) 

有誰知道怎麼做？

Answer 1

MdDialogs可以附加模板和控制器。這段代碼應該讓你開始。

另外，看看「自定義對話框」演示here。

$mdDialog.show({ 
 
    parent: parentEl, 
 
    targetEvent: $event, 
 
    template: '<md-dialog aria-label="List dialog">' + 
 
    ' <md-dialog-content>' + 
 
    ' <md-list>' + 
 
    '  <md-list-item ng-repeat="item in items">' + 
 
    '  <p>Number {{item}}</p>' + 
 
    '  ' + 
 
    ' </md-list-item></md-list>' + 
 
    ' </md-dialog-content>' + 
 
    ' <md-dialog-actions>' + 
 
    ' <md-button ng-click="closeDialog()" class="md-primary">' + 
 
    '  Close Dialog' + 
 
    ' </md-button>' + 
 
    ' </md-dialog-actions>' + 
 
    '</md-dialog>', 
 
    locals: { 
 
    items: $scope.items 
 
    }, 
 
    controller: DialogController 
 
}); 
 

 
function DialogController($scope, $mdDialog, items) { 
 
    $scope.items = items; 
 
    $scope.closeDialog = function() { 
 
    $mdDialog.hide(); 
 
    } 
 
}

您還可以使用templateUrl選項，並提供一個模板文件，如果你不想這麼多的內嵌HTML，這是完全合理的。