2017-01-09 7 views
0

ルーティングとコントローラに関するチュートリアルを適用します。 問題はエラーはありませんが、フォームはコントローラに変数を送信していないことです。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> 
+1

上のプロパティに入力された値を結合し、あなたの入力でディレクティブは、$ scope.usernameと$ scope.passwordは未定義になりますので、あなたのコントローラにご入力タイプを結合しませんでした。入力タイプでng-model = "username"属性を使用する – anand

答えて

2

あなたはが見つかりませんでした$スコープ

<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> 
関連する問題