Angular JS重定向到另一个页面

debugcn 发表于 Dev

喉

我正在登录表单上使用angular js。如果用户名和密码正确，则应重定向到成功页面。我现在正在显示一条消息，但是一旦用户输入正确的凭据，我就如何重定向到成功页面而感到震惊。有什么帮助吗？

LOGIN.html :

<!DOCTYPE html>
<html ng-app="">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
    <script src="Controller.js"></script>
</head>
<body ng-controller="LoginCheckController">
    <h1>Login Page</h1>
    <hr />
    UserName : 
    <input type="text" ng-model="txtUname" required/><br />
    Password  :
    <input type="password" ng-model="txtPwd" required/><br />

    <input type="submit" value="Submit" ng-click="LoginCheck()" /><br />
    <!--    <button ng-click="go('/Successpage')">Submit</button>-->
    <br />
    <div ng-repeat="x in users">

        <div ng-if="txtUname === x.UserName && txtPwd === x.Password">
            You entered UserName and Password correctly.
        </div>

        <div ng-if="txtUname === '' && txtUname !== x.UserName && txtPwd !== x.Password">
            You entered UserName and Password Incorrectly.
        </div>
    </div>


CONTROLLER . js :

function LoginCheckController($scope) {

            $scope.users = [
    { UserName: 'chandra', Password: 'hello' },
    { UserName: 'Harish', Password: 'hi' },
    { UserName: 'Chinthu', Password: 'hi' },
            ];
            $scope.go = function (path) {
                $location.path("/SuccessPage");
            };                 

        }



REGISTRATION . html :


<!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
    <script src="RegistrationController.js"></script>
</head>

<body>
    <h1>Registration Page</h1>
    <hr />
    <div ng-app="myApp">
        UserName : 
        <input type="text" ng-model="Uname" /><br />
        New Password  :
        <input type="password" ng-model="Pwd" /><br />
        Re-enter Password  :
        <input type="password" ng-model="Pwd" /><br />

        <div ng-controller="DemoController">
            <div>
               Gender : <select ng-model="correctlySelected" ng-options="opt as opt.label for opt in options">
                </select>               
            </div>
            <br />

          Address : <br />
            <textarea rows="3" cols="20"></textarea>

            <div>
                State : <select ng-model="correctlySelected" ng-options="opt as opt.label for opt in states">
                </select> 
            </div>

            <div>
                City : <select ng-model="correctlySelected" ng-options="opt as opt.label for opt in cities">
                </select> 
            </div>       
            <input type="Submit" name="btn" value="Register" />
        </div>
    </div>
</body>
</html>


REGISTRATIONCONTROLLER . js :

angular.module('myApp', []).controller('DemoController', function ($scope) {

    $scope.options = [
      { label: 'Male' },
      { label: 'Female' }
    ];

    $scope.cities = [
      { label: 'Mahabubnagar' },
      { label: 'Ranga Reddy' },
      { label: 'Nalgonda' },
      { label: 'Vizag' },
      { label: 'Karnool' },
      { label: 'Kadapa' },
      { label: 'Chennai' },
      { label: 'abc' },
      { label: 'xyz' }
    ];

    $scope.states = [
     { label: 'Telangana' },
     { label: 'Andhrapradesh' },
     { label: 'Tamilanadu' },     
    ];

});

肖尔

这是小矮人，我想这会对您有帮助。谢谢

http://plnkr.co/edit/XraWvTaR4fGF3Rdo6KBu?p=preview

app.config(function($stateProvider, $urlRouterProvider) {

  // For any unmatched url, send to /index
  $urlRouterProvider.otherwise("/login");

  $stateProvider
    .state('login', {
      url: "/login",
      templateUrl: "login.html",
      controller: "LoginCheckController"
    })
    .state('SuccessPage', {
      url: "/SuccessPage",
      templateUrl: "SuccessPage.html",
      //controller: "LoginCheckController"
    });
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。