AngularJs表單提交不起作用

我在路由和控制器上應用了一個教程。問題是沒有錯誤，但表單不提交變量到控制器！AngularJs表單提交不起作用

我嘗試了另一種方式來提交表單，如提交類型的按鈕，但它沒有奏效。

controller.js：

var app = angular.module('mainApp', ['ngRoute']); 

    // configure our routes 
    app.config(function($routeProvider) { 
     $routeProvider 

      // route for the home page 
      .when('/', { 
       templateUrl : 'login.html' 
      }) 

      .when('/dashboard', { 
       templateUrl : 'dashboard.html' 
      }); 
    }); 

app.controller('loginCtrl',function($scope,$location){ 
console.log('login controller'); 
    $scope.submit = function(){ 
     var uname = $scope.username; 
     var pass = $scope.password; 
     console.log($scope.username); 

     if($scope.username == 'Admin' && $scope.password == '123456'){ 
      console.log('=='); 
      $location.path('/dashboard'); 
     } 
     else{ alert('Wrong stuff') 
    console.log('Error');}  
    };  
});

這裏是html頁面：

的index.html：

<!DOCTYPE html> 
<html lang="en"> 
<head> 

    <title>AJS</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script> 
<script src="controller.js"></script> 

</head> 
<body ng-app="mainApp"> 
    <div ng-view></div> 
</body> 
</html>

這裏是login.html的：

<div ng-controller="loginCtrl" > 
    <form id="loginForm" action="/" > 
    <table border="0"> 
     <tr> 
      <td> User Name:</td> 
      <td> <input type="text" name="username" id="username"></td> 
     </tr> 
    <tr> 
     <td>Password:</td> 
     <td><input type="password" name="password" id="password"></td> 
    </tr> 

    <tr> 
     <td></td> 
     <td><button type="button" ng-click="submit()" > Login </button></td>  
    </tr> 
    </table> 
    </form> 
</div>

來源

2017-01-09 Ms.J

你沒有綁定您的輸入型到你的控制器，以便$ scope.username和$ scope.password將是不確定的。在輸入類型中使用ng-model =「username」屬性 – anand

您錯過了ng-model指令在你的輸入，輸入值綁定到一個屬性上的$範圍

<div ng-controller="loginCtrl" > 
    <form id="loginForm" action="/" > 
    <table border="0"> 
     <tr> 
      <td> User Name:</td> 
      <td> <input ng-model="username" type="text" name="username" id="username"></td> 
     </tr> 
    <tr> 
     <td>Password:</td> 
     <td><input ng-model="password" type="password" name="password" id="password"></td> 
    </tr> 

    <tr> 
     <td></td> 
     <td><button type="button" ng-click="submit()" > Login </button></td>  
    </tr> 
    </table> 
    </form> 
</div>

來源

2017-01-09 18:14:46

AngularJs表單提交不起作用

回答

相關問題