Javascript 用户名和密码的弹出式模板

我正在使用ionic制作一个移动应用程序。我想使用一个弹出窗口来收集两个数据，一个用户名和一个密码。我浏览了很多网站，它只显示了弹出窗口如何收集一条数据，而不是两条。此外，我想使弹出窗口的紫色。我该怎么做

$scope.create = function() {
    $scope.data = {}; 
  // An elaborate, custom popup
  var myPopup = $ionicPopup.show({
    template: '<input type="password" ng-model="data.one">',
    style: 'background-color:purple;',
    title: 'Enter Wi-Fi Password',
    scope: $scope,
    buttons: [
      { text: 'Cancel' },
      {
        text: '<b>Save</b>',
        type: 'button-balanced',
        onTap: function(e) {
          if ((!$scope.data.one)&&(!$scope.data.two)) {
            e.preventDefault();
          } else {
            return $scope.data;
          }
        }
      }
    ]
  });
}

$scope.create=function（）{
$scope.data={}；
//精心制作的、定制的弹出窗口
var myPopup=$ionicPopup.show({
模板：“”，
样式：“背景色：紫色；”，
标题：“输入Wi-Fi密码”，
范围：$scope，
按钮：[
{text:'取消'}，
{
文本：“保存”，
类型：'按钮平衡'，
onTap：功能（e）{
if（！$scope.data.one）和（！$scope.data.two））{
e、 预防默认值（）；
}否则{
返回$scope.data；
}
}
}
]
});
}

您可以使用

下面是一个工作示例

HTML

  <script id="add-or-edit-cart.html" type="text/ng-template">

        <ion-modal-view>
            <ion-header-bar>
                <h1 class="title">{{ action }} Page</h1>
                <div class="buttons">
                    <button ng-click="deleteCart()" class="button button-icon icon ion-close"></button>
                </div>
            </ion-header-bar>
            <ion-content>
                <div class="list list-inset">
                    <label class="item item-input">
                      Dummy Text
                    </label>

                </div>

            </ion-content>
        </ion-modal-view>

    </script>

JS

添加以下控制器

.controller('OverviewController', function ($scope, $ionicModal) {
    var vm = this;

    $ionicModal.fromTemplateUrl('add-or-edit-cart.html', {
        scope: $scope,
        animation: 'slide-in-up'
    }).then(function (modal) {
        $scope.modal = modal;
    });

    vm.showCart = function () {
        $scope.Cart = {};
        $scope.action = 'Cart';
        $scope.isAdd = true;
        $scope.modal.show();
    };




    $scope.deleteCart = function () {

        $scope.modal.hide();
    };

    $scope.$on('$destroy', function () {
        $scope.modal.remove();
    });

    return vm;

---

这里是工作

使用ionicModel而不是popup

.controller('OverviewController', function ($scope, $ionicModal) {
    var vm = this;

    $ionicModal.fromTemplateUrl('add-or-edit-cart.html', {
        scope: $scope,
        animation: 'slide-in-up'
    }).then(function (modal) {
        $scope.modal = modal;
    });

    vm.showCart = function () {
        $scope.Cart = {};
        $scope.action = 'Cart';
        $scope.isAdd = true;
        $scope.modal.show();
    };




    $scope.deleteCart = function () {

        $scope.modal.hide();
    };

    $scope.$on('$destroy', function () {
        $scope.modal.remove();
    });

    return vm;