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

Question

因此，我对Angular并不陌生，并且创建了用于登录的模式。 我正在尝试使用警报窗口显示用户输入，以检查我的表单数据是否已发送到控制器。 数据未发送到控制器。 下面是代码。

login-popup.html

<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();
    }
}]);

因此，警报（用户）在浏览器中给出“ object object ”警报消息。 我该如何解决？

Answer 1

在这种情况下，用户是一个对象。 警报仅显示文本。 您可以这样做：

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

另外，如果您只是为了进行测试，则可以使用：

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

如果您想采用“角度”方式，则建议查看$ window和/或$ log。 仅仅为了发展，任何一种方式都足够。

窗口警报

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

控制台记录

$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

Answer 2

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

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

您提到的用户名存在的问题是，您正在使用type =“ email” ，并且应该根据此帖子输入有效的电子邮件，因此您的模型属性将被更新。

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