Question

我正在应用路由和控制器的教程。问题是没有错误，但表单没有将变量提交到控制器！

我尝试了另一种方式来提交表单，例如提交类型的按钮，但它不起作用。

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>

Answer 1

您错过了输入中的ng-model指令，它将输入值绑定到$ scope上的属性

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

AngularJs表单提交无效

1 个答案: