2016-04-26 7 views
0

Я создаю кросс-платформенное приложение с использованием Onsen UI, Monaca и AngularJS. Мне нужно проверить, существует ли пользователь на основе введенного им идентификатора пользователя. Если идентификатор пользователя найден, имя возвращается мне, иначе пользователь не сможет перейти к следующему экрану.Проверка, существует ли пользователь с помощью AngularJS и ng-if

Я отправляю UserID через вызов API ($ http) и получаю объект 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> 

бы это лучше обращаться в приложение-контроллер, возможно?

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; 
     }); 
    } 
}); 

ответ

1

Основываясь на том, что я получил от вашего вопроса:

Вы можете попробовать инициализировать переменную $ объема, как $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> 
+0

Я определил переменную, как показано ниже, и сделать чек, если если employee_name! = «0» (поскольку объект работник возвращается всегда будет иметь число - 0 для несуществующих пользователей и имя пользователя для существующих пользователей). Но все равно не работает. Может быть, есть проблема с кодом контроллера? $ scope.result = false; функция fetchUSerID() { $ http.get ("? Mymadeupdomain/API/login.php = идентификатор" + $ scope.search) .success (функция (данные) { $ scope.userIDs = данные; if ($ scope.userIDs.employee_name! = "0") { $ scope.result = true; } }); } – heyred

+0

Вы проверяли, установлена ​​ли переменная $ scope.result в true или нет ... Попробуйте отладить или утешить –

+0

$ scope.result устанавливается в TRUE, а имя_комбината возвращается как НЕ УКАЗАН. С приведенным ниже кодом я никогда не попадаю в ELSE часть инструкции, независимо от того, существует ли пользователь или нет. if ($ scope.userIDs.employee_name! = "0") { console.log ("Идентификатор пользователя:" + $ scope.userIDSearch); console.log ("Результат установлен на исходное:" + $ scope.result); $ scope.result = true; консоль.log («Результат установлен на:» + $ scope.result); console.log ("User Name Scope:" + $ scope.userIDs.employee_name); console.log ("Data:" + data.employee_name);} else {console.log ("Получение инструкции ELSE");} – heyred

 Смежные вопросы

  • Нет связанных вопросов^_^