无法从Angular js的html页面中将用户名和密码传递给控制器

Question

i have two fields username and password that i want to get in the angular js controller to verify the login. but in the controller im not able to get it after filling the username and password and submitting the button

     <form class="form-signin" action="" method="post">
                        <span id="reauth-email" class="reauth-email"></span>
                        <input type="text" ng-model="username" id="Username" name="Username" class="form-control" placeholder="Email address" required autofocus>
                        <input type="password" ng-model="password" id="password" name="password" class="form-control" placeholder="Password" required style="margin-top:10px">
                        <div id="remember" class="checkbox">
                            <label>
                                <input type="checkbox" value="remember-me"> Remember me
                            </label>
                        </div>
                        <input type="hidden" name="" value="" />
                        <input class="btn btn-lg btn-primary btn-block btn-signin"  type="button" value="{{btntext}}" ng-click="login()" >
                    </form>

angular js

var app = angular.module('homeapp', []);
app.controller('HomeController', function($scope, $http) {
  $scope.username = '';
  alert($scope.username);
  $scope.btntext="Login";
  $scope.login=function () {
  $http.get("/account/loginverify")
  .then(function(response) {
    $scope.myWelcome = response.data;
    if(response.data=="1"){
      window.location.href='home.html'
    } 
    else  {
      alert("Invalid username  or password...!!!")
    }
  });
}
});

Answer 1

You need to bind your controller to the HTML template using ngController directive. See the following example:

 var app = angular.module('homeapp', []); app.controller('HomeController', function($scope, $http) { $scope.username = ''; $scope.btntext = "Login"; $scope.login = function() { console.log($scope.username, $scope.password); //$http.get("/account/loginverify") // .then(function(response) { // $scope.myWelcome = response.data; // if (response.data == "1") { // window.location.href = 'home.html' // } else { // alert("Invalid username or password...!!!") // } // }); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <form class="form-signin" action="" method="post" ng-app="homeapp" ng-controller="HomeController"> <span id="reauth-email" class="reauth-email"></span> <input type="text" ng-model="username" id="Username" name="Username" class="form-control" placeholder="Email address" required autofocus> <input type="password" ng-model="password" id="password" name="password" class="form-control" placeholder="Password" required style="margin-top:10px"> <div id="remember" class="checkbox"> <label> <input type="checkbox" value="remember-me"> Remember me </label> </div> <input type="hidden" name="" value="" /> <input class="btn btn-lg btn-primary btn-block btn-signin" type="button" value="{{btntext}}" ng-click="login()"> </form>