AngularJs 表单提交不起作用答案

【问题标题】：AngularJs form submission is not workingAngularJs 表单提交不起作用
【发布时间】：2017-05-24 01:37:44
【问题描述】：

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

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

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>

【问题讨论】：

您没有将输入类型绑定到控制器，因此 $scope.username 和 $scope.password 将未定义。在输入类型中使用 ng-model="username" 属性

标签： angularjs controller ngroute

【解决方案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>

【讨论】：