交换Angular Material对话框中的内容

时间:2015-08-24 00:33:32

标签: angular-material

我正在尝试使用Angular Material创建一个Login / Register对话框。单击“切换”按钮时,对话框应在登录页面和注册页面之间切换。

这是对话框html

<md-dialog>
  <md-dialog-content>
    <div ng-if="lc.show_form == 'login'">
      <form name="loginForm" ng-submit="loginForm.$valid && lc.login()" novalidate>
        <md-input-container>
          <label>Email</label>
          <input type="email" name="email" required ng-model="project.email">

          <div ng-messages="loginForm.email.$error" ng-if="loginForm.email.$dirty">
            <div ng-message="required">This is required.</div>
          </div>
        </md-input-container>
        <md-input-container>
          <label>Password</label>
          <input type="password" name="password" required ng-model="project.password">

          <div ng-messages="loginForm.password.$error" ng-if="loginForm.password.$dirty">
            <div ng-message="required">This is required.</div>
          </div>
        </md-input-container>

        <md-button ng-click="lc.login()" class="md-raised md-primary">Login</md-button>
        <md-button ng-click="lc.showRegister()">Switch</md-button>
      </form>
    </div>
    <div ng-if="lc.show_form == 'register'">
      <form name="registerForm" ng-submit="registerForm.$valid && lc.register()" novalidate>
        <md-input-container>
          <label>Email</label>
          <input type="email" name="email" required ng-model="project.email">

          <div ng-messages="loginForm.email.$error" ng-if="loginForm.email.$dirty">
            <div ng-message="required">This is required.</div>
          </div>
        </md-input-container>
        <md-input-container>
          <label>Password</label>
          <input type="password" name="password" required ng-model="project.password">

          <div ng-messages="loginForm.password.$error" ng-if="loginForm.password.$dirty">
            <div ng-message="required">This is required.</div>
          </div>
        </md-input-container>
        <md-input-container>
          <label>Password Confirm</label>
          <input type="password_confirm" name="password_confirm" required ng-model="project.password_confirm">

          <div ng-messages="loginForm.password_confirm.$error" ng-if="loginForm.password_confirm.$dirty">
            <div ng-message="required">This is required.</div>
          </div>
        </md-input-container>

        <md-button ng-click="lc.register()" class="md-raised md-primary">Register</md-button>
        <md-button ng-click="lc.showLogin()">Switch</md-button>
      </form>
    </div>
  </md-dialog-content>
</md-dialog>

这是控制器代码

angular.module('dialogDemo', ['ngMaterial'])
  .controller('AppCtrl', function($mdDialog, $log) {

            $mdDialog.show({
                controller: 'dialogCtrl',
                controllerAs: 'lc',
                templateUrl: 'loginDialog.tmpl.html'
            });

  })
  .controller('dialogCtrl', function($scope, $log) {
    var self = this;
    self.show_form = 'login';

    self.showRegister = function() {
      self.show_form = 'register';
      console.log('show register');
    };

    self.showLogin = function() {
      self.show_form = 'login';
      console.log('show login');
    };
  });

这是我想要完成的东西。 http://plnkr.co/edit/nLeJHZB9XiIiiR9fPNEe?p=preview

单击切换按钮。您会注意到内容发生了变化,但是如果再次单击切换按钮,对话框只会调整大小,如果再次单击它会切换回来。我试图找出为什么只用一次按钮就不会在两个视图之间切换。

1 个答案:

答案 0 :(得分:0)

你的笨蛋对我来说很好。

我按Dim r As Range Set r = Range("A1:B20").Find(ComboBox1.Value) If Not r Is Nothing Then r.Activate 'And do this Else MsgBox ("No data available for this selection.") 'And do this End If 然后我得到登录模式,然后按login,模态变成注册模式。如果我再次按register,我会获得登录模式。

pd:我正在使用chrome。