修改和调整离子弹出窗口的大小

Question

如何修改Ionic popup（第一张图片）以使其看起来像第二张图片？我可以添加更多输入字段并调整弹出窗口的大小吗？目的是通过在服务器上键入一些信息（如第二个图像）来创建条目。不应打开额外页面或新表格。特别是在同一页面上应该使用弹出窗口创建一个条目。

第一张图片

第二张图片

首次弹出的代码：

myApp.controller('showPopupCtrl',function($scope, $ionicPopup) {
    // Triggered on a button click, or some other target
    $scope.showPopup = function() {
        $scope.data = {}        
        // An elaborate, custom popup
        var myPopup = $ionicPopup.show({
            template: '<input type="password" ng-model="data.wifi">',
            title: 'Enter Wi-Fi Password',
            subTitle: 'Please use normal things',
            scope: $scope,
            buttons: [
                { text: 'Cancel' },
                {
                    text: '<b>Save</b>',
                    type: 'button-positive',
                    onTap: function(e) {
                        if (!$scope.data.wifi) {
                            //don't allow the user to close unless he enters wifi password
                            e.preventDefault();
                            } else {
                            return $scope.data.wifi;
                        }
                    }
                },
            ]
        });
        myPopup.then(function(res) {
            console.log('Tapped!', res);
        });
        $timeout(function() {
            myPopup.close(); //close the popup after 3 seconds for some reason
        });
    };
});

Answer 1

您可以将离子模态用于此目的，请查看此链接以获取文档

http://ionicframework.com/docs/api/service/ $ ionicModal /

你可以在codepen中找到很多例子