Получить данные формы из пользовательского интерфейса в Angular Js

0

Поэтому я довольно новичок в 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 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 " в браузере. Как мне это решить?

Теги:

2 ответа

0

Подход, упомянутый @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" />
Поделиться
0

пользователь в этом случае является объектом. alert отображает только текст. Вы можете сделать это:

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.
Поделиться
  • 0
    Когда я делаю это, alert (user.username), во всплывающем окне оповещения появляется сообщение undefined
  • 0
    Что вы видите с console.log (user); ?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню