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

Question

I am building a cross-platform app using Onsen UI, Monaca and AngularJS. I need to check if a user exists based on the UserID they enter. If the UserID is found, then the name is returned to me, else the user wont be able to proceed to the next screen.

I send the UserID via API call ($http) and get a JSON object as a response. When I enter a UserID I can retrieve the JSON object (tested and working) but I am stuck on authentication.

When the user clicks the LOG IN button, I show a modal (ons-modal) window with a message of the users name if the user is found, but I am stuck on showing the message LOGIN FAIL if no user is found.

Is there perhaps a better way to handle this rather than a modal window?

Below is my code. And below is an example of the JSON that is returned.

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

There is also a Controller that handles the API calls and it can be assumed this is working OK as I am able to get user names - but just stuck on authentication.

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>

Would this be better handled in the app-controller perhaps?

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

Based on what I got from your question:

You can try initializing a $scope variable as $scope.result = false; In the success loop of $http.get() (ie if you get the user data), you can set it to true.

On Your modal window, you can use a condition like

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