Angular JS应用程序始终命中如果语句永远不会继续使用Else语句

时间:2017-10-14 00:55:24

标签: javascript angularjs wcf

我正在将Wcf服务用于Angular JS Application。我通过提供用户名和密码来创建用户登录系统。但是我在输入文件中输入的用户名或密码总是显示消息的用户名和密码是正确的。我想如果用户名和密码是正确的,那么我想在角js应用程序中显示消息,否则用户名和密码不正确但我不知道为什么它总是打在if语句,如果我输入错误的用户名或密码无关紧要。

这是我的脚本代码。

  ///// <reference path="../angular.min.js" />  



var app = angular.module("WebClientModule", [])

    .controller('Web_Client_Controller', ["$scope", 'myService', function ($scope, myService) {

        $scope.OperType = 1;

        //1 Mean New Entry  

        //To Clear all input controls.  
        function ClearModels() {
            $scope.OperType = 1;
            $scope.Username = "";
            $scope.Password = "";

        }
        $scope.login = function () {
            var User = {
                Username: $scope.Username,
                Password: $scope.Password,
            };
            myService.AuthenticateUser(User).then(function (pl) {

                if (pl.data) {
                    $scope.msg = "Password or username is correct !";//Always hit on this line
                }
                else {
                    $scope.msg = "Password Incorrect !";
                    console.log("Some error Occured" + err);
                }
                }, function (err) {
                $scope.msg = "Password or username is Incorrect !";
                console.log("Some error Occured" + err);
            });
        };



    }]);



app.service("myService", function ($http) {



    this.AuthenticateUser = function (User) {
        return $http.post("http://localhost:52098/HalifaxIISService.svc/AuthenticateUser", JSON.stringify(User));
    }
})

这是我的HTML代码..

@{
    Layout = null;
}

<!DOCTYPE html>

<html ng-app="WebClientModule">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/angular.min.js"></script>

    <script src="~/RegistrationScript/LoginScript.js"></script>
</head>
<body>

    <table id="tblContainer" data-ng-controller="Web_Client_Controller">
        <tr>
            <td></td>
        </tr>
        <tr>
            <td>
                <div style="color: red;">{{msg}}</div>
                <table style="border: solid 4px Red; padding: 2px;">

                    <tr>
                        <td></td>
                        <td>
                            <span>Username</span>
                        </td>
                        <td>
                            <input type="text" id="username" data-ng-model="Username" required="" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <span>Password</span>
                        </td>
                        <td>
                            <input type="password" id="password" required data-ng-model="Password" require="" />
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td>
                            <input type="button" id="Login" value="Login" data-ng-click="login()" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>
<script src="~/RegistrationScript/LoginScript.js"></script>

这是外出..

click here to see the result

2 个答案:

答案 0 :(得分:1)

如果您将响应发布到您的http POST请求,这将有所帮助。我敢打赌,即使有不正确的登录信息,您仍然会发出有效的http请求,因此获得一个有效的http响应,其中包含可能表明登录信息不正确的数据(pl.data)。

如果pl.data为null或未定义,则只会触发else语句。研究javascript条件以及它们如何与对象一起工作。如果对象存在(非null或未定义),则将其视为true。

答案 1 :(得分:1)

在then()块中,首先尝试使用以下代码检查pl.data的值 的console.log(pl.data)。 有了这个,您将了解从WCF服务返回的值。 如果服务总是返回True,那么在Angular中,它将始终执行if()语句。 实施例

myService.AuthenticateUser(User).then(function (pl) {
console.log(pl.data)
if(pl.data){
    $scope.msg = "Password or username is correct !"
}
else{
...
}