我正在尝试使用angularjs创建一个简单的登录应用程序使用路由但不处理事件

时间:2016-12-31 08:31:32

标签: angularjs

我正在尝试仅使用angularjs创建登录应用程序,我使用了angularjs的路由,最初是div,其中" ng-view"定义了登录页面的路由。但是当我点击按钮输入用户名和密码后没有任何事情发生,即事件未被处理.. 下面是索引页面的代码:

 <!DOCTYPE html>
<html>
<head>
    <title>Login App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="angular-route.js"></script>
</head>
<body ng-app="mylogin">
<h1>Login Page</h1>
<div ng-view></div>
<script>
    var app=angular.module('mylogin',['ngRoute']);
    app.config(function($routeProvider){
        $routeProvider
        .when('/',{
            templateUrl:"login.html"
        })
        .when('/dashboard',{
            templateUrl:"dashboard.html"
        })
        .otherwise({
            redirectTo:"/"
        });
    });

app.controller("loginctrl",function($scope,$location)
        {
            $scope.submit=function()
            {
                var uname=$scope.username;
                var pwd=$scope.password;
                if($scope.username=='admin' && $scope.password=='admin')
                {
                    $location.path('/dashboard');
                }
            };
        });

</script>
</body>
</html>

下面是登录页面的代码:

    <div ng-controller="loginctrl">
<form action="/" id="mylogin">
Username:<input type="text" id="username" ng-model="username"><br>
Password:<input type="password" id="password" ng-model="pasword"><br>
<button type="button" ng-click="submit()">Login</button>    
</form>
</div>

1 个答案:

答案 0 :(得分:0)

ng-model password中的错字,所以当您在控制器if($scope.username=='admin' && $scope.password=='admin')内进行$scope.password时恰好是undefined

ng-model="pasword"

应该是

ng-model="password"

Demo Plunkr