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

Question

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

我通过 API 调用 ($http) 发送 UserID 并获取 JSON 对象作为响应。当我输入 UserID 时，我可以检索 JSON 对象(已测试且正常工作)，但我陷入了身份验证。

当用户单击“登录”按钮时，如果找到用户，我会显示一个模态(ons-modal)窗口，其中包含用户名消息，但如果找不到用户，我会一直显示消息“登录失败” .

是否有比模态窗口更好的方法来处理这个问题？

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

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

还有一个处理 API 调用的 Controller ，可以假设它工作正常，因为我能够获取用户名 - 但只是停留在身份验证上。

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>

也许这在应用程序 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>