Question

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

登录-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

在这种情况下，

user是一个对象。警报仅显示文本。你可以这样做：

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

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

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

如果你想要这个＆＃34; angular＆＃34;然后我建议看$ 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”，并且应根据this帖子输入有效的电子邮件，因此您的模型属性将是更新。

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

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

2 个答案: