用户名和密码的离子弹出模板答案

【问题标题】：Ionic popup template for username and password用户名和密码的离子弹出模板
【发布时间】：2016-02-08 02:14:43
【问题描述】：

我正在使用 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;
          }
        }
      }
    ]
  });
}

【问题讨论】：

使用 ionicModel 而不是弹出窗口link

标签： javascript angularjs css jquery-mobile ionic-framework

【解决方案1】：

您可以使用$ionicModal 实现此目的

这是一个工作示例

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>

将ng-click 添加到页脚中的查看购物车

<ion-footer-bar  class="bar-footer btn-footer bar-light">
  <div class="row">
    <div class="col">
      <button ng-click="vm.showCart()" ng-controller="OverviewController as vm" class="button  button-block button-positive"> View cart Page </button>
    </div>
    <div class="col">
      <button class="button  button-block button-calm"> View checkout page </button>
    </div>
  </div>
</ion-footer-bar>

添加以下控制器

.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;

这里正在工作CodePen

【讨论】：