从Angular Js中的UI Modal获取表单数据

So I'm fairly new to Angular and Have created a Modal for Login. I'm trying to show the user input using alert window to check if my form data is sent to controller. The data is not being sent to controller. Below is the code.

所以我对Angular很新,并为登录创建了一个Modal。我正在尝试使用警报窗口显示用户输入,以检查我的表单数据是否已发送到控制器。数据未发送到控制器。以下是代码。

<div class="modal-dialog">
    <!--<div class="modal-content">-->

        <!--Close Form Button-->
        <div class="modal-header">
            <button type="button" class="close" ng-click="cancel()">&times;</button>
            <h4 class="modal-title">Log In</h4>
        </div>

        <!--Form Body-->
        <div class="modal-body">
            <form role="form">
                <div class="form-group">
                    <input ng-model="user.username" type="email" class="form-control" placeholder="Email" id="username">
                </div>
                <div class="form-group">
                    <input ng-model="user.password" type="password" class="form-control" placeholder="Password" id="password">
                </div>
            </form>
        </div>
        <!--Login Button-->
        <div class="modal-footer">
            <button class="btn btn-success btn-block" ng-click="login(user)">Let's GO</button>
        </div>


    <!--</div>-->
</div>

app.js

var app = angular.module('LoginPage',['ngAnimate', 'ui.bootstrap']);

app.controller('LoginController',['$scope','$uibModal', function($scope,$uibModal){
        $scope.name = 'a100';
        $scope.open = function(){
            var modalInstance = $uibModal.open({
                  animation: 'true',
                  templateUrl: 'login-popup.html',
                  controller: 'LoginModalController'
            });
        };
}]);

app.controller('LoginModalController',['$scope','$uibModalInstance',function($scope,$uibModalInstance, $modalInstance){
    $scope.cancel = function () {
        $uibModalInstance.dismiss('cancel');
      };
    $scope.user = {};
    $scope.login = function(user){
        $scope.user = user;
        alert(user);
        $uibModalInstance.close();
    }
}]);

So, the alert(user) gives 'object object' alert message in browser. How do I get this solved?

因此,警报(用户)在浏览器中提供“对象对象”警报消息。我如何解决这个问题?

2 个解决方案

#1

user is an object in this case. alert only displays text. You could do this:

在这种情况下,user是一个对象。警报仅显示文本。你可以这样做:

alert('Username: ' + user.username + ' Password: ' + user.password);

Alternatively, if you are just doing this for testing, you could use:

或者,如果您只是为测试而执行此操作,则可以使用:

console.log(user), which will give you an expandable object.

If you wanted to this the "angular" way then I suggest looking at $window and/or $log. Just for development, either way suffices.

如果你想这个“有角度”的方式,那么我建议看$ window和/或$ log。只是为了发展,无论哪种方式都足够了。

Window Alert

$window.alert('Username: ' + user.username + ' Password: ' + user.password);

Console Logging

$log.debug(user), which will give you an expandable object.

$window: https://docs.angularjs.org/api/ng/service/$window
$log: https://docs.angularjs.org/api/ng/service/$log

#2

Approach, mentioned by @brianslattery, should work, test code here https://plnkr.co/edit/3MkHOx2fiHLYfHUPHLS8?p=preview

@brianslattery提到的方法应该可行,测试代码在这里https://plnkr.co/edit/3MkHOx2fiHLYfHUPHLS8?p=preview

  $scope.login = function(user) {
    $scope.user = user;
    alert(user.username + " " + user.password);
    $uibModalInstance.close();
  }

The problem with username that you mentioned, is that you are using type="email", and should enter valid email, as per this post, so your model property will be updated.

您提到的用户名问题是您使用的是type =“email”,并且应该输入有效的电子邮件,因此您的模型属性将会更新。

<input ng-model="user.username" type="email" class="form-control" placeholder="Email" id="username" />

#1