Question

我正在使用Onsen UI，Monaca和AngularJS构建跨平台应用。我需要根据用户输入的内容来检查用户是否存在。如果找到UserID，那么该名称将返回给我，否则用户将无法进入下一个屏幕。

我通过API调用（$ http）发送UserID并获取JSON对象作为响应。当我输入UserID时，我可以检索JSON对象（已测试并正常工作）但我仍然坚持认证。

当用户点击LOG IN按钮时，如果找不到用户，我会显示一个模态（ons-modal）窗口，其中包含用户名的消息，但是如果找不到用户，我将停留显示消息LOGIN FAIL

是否有更好的方法来处理这个而不是模态窗口？

以下是我的代码。以下是返回的JSON示例。

[{"employee_name":"John Doe"}]

还有一个控制器可以处理API调用，可以假设它工作正常，因为我能够获取用户名 - 但只是坚持认证。

的login.html

<div style="text-align: center; color: #889DA8">
    Enter your<br><strong>User ID</strong>
</div>

<form class="login-form" style="text-align: center" name="myForm">
    <section style="padding: 8px">
        <input type="password" class="text-input--underbar" required minlength="3" maxlength="4" ng-model-options="{ debounce : 800 }" placeholder="User ID" ng-model="userIDSearch" >
    </section>

    <section style="padding: 0 8px 8px">
        <ons-button var="saveBtn" ng-disabled="myForm.$invalid" modifier="large" onclick="modal.show('modal')">Log In</ons-button>
    </section>
</form>

<!-- Displays Modal Login Confirmation Screen -->
<ons-modal var="modal">
    <div class="alert-dialog-mask"></div>

    <div class="alert-dialog alert-dialog--android">
        <div class="alert-dialog-title alert-dialog-title--android">
            <div style="text-align: center">Please confirm your name</div>
        </div>

        <div class="alert-dialog-content alert-dialog-content--android">
            <div style="text-align: center; padding-top: 10px; padding-bottom: 15px; padding-left: 10px; padding-right: 10px;">
                <p ng-repeat="userID in userIDs">

                    <!-- If returned value != 0 then we have a valid User -->
                    <!-- NOT WORKING HERE -->
                    <span ng-if="userID.employee_name !== 0 ">
                        <strong>
                            {{userID.employee_name}}
                        </strong>    
                    </span>
                    <!-- NOT WORKING HERE -->        
                    <span ng-else>
                        <strong>
                            User ID not found. Please try again.
                        </strong>    
                    </span>                           
                </p>
            </div>
        </div>

        <div class="alert-dialog-footer alert-dialog-footer--one">
            <button class="alert-dialog-button alert-dialog-button--one" ng-click="modal.hide()">Cancel</button>
            <button class="alert-dialog-button alert-dialog-button--primal alert-dialog-button--one" ng-click="myNavigator.pushPage('vehicle-id.html', {animation: 'slide'});" )>Ok</button>
        </div>
    </div>
</ons-modal>

或许可以在app-controller中更好地处理这个问题吗？

appController.js

// App Controller Start
angular.module("myApp", ['onsen']).controller("appController", function($scope, $http)
{
    // Watch for changes in the User ID text field
    $scope.$watch('userIDSearch', function()
    {
       fetchUSerID(); 
    });

    // Initialising the search field
    $scope.userIDSearch = "";

    function fetchUSerID()
    {
        $http.get("mymadeupdomain/api/login.php?userid=" + $scope.search).success(function(data)
        {
            $scope.userIDs = data;
        }); 
    }
});

Answer 1

根据我的问题得出：

您可以尝试将$ scope变量初始化为$scope.result = false; 在$ http.get（）的成功循环中（即如果获得用户数据），可以将其设置为true。

在你的模态窗口中，你可以使用像

这样的条件

<span ng-if = 'result'><{{bind user name variable here}}</span>
<span ng-if ='!result'>No User Found/ Login Failed</span>

使用AngularJS和ng-if检查用户是否存在

1 个答案: