AngularJSとng-ifを使用しているユーザーが存在するかどうかをチェック

Question

私はOnsen UI、Monaca、AngularJSを使用してクロスプラットフォームアプリケーションを構築しています。ユーザーが入力したユーザーIDに基づいてユーザーが存在するかどうかを確認する必要があります。 UserIDが見つかった場合、その名前が私に返されます。そうでなければ、ユーザーは次の画面に進むことができません。

APIコール（$ http）でUserIDを送信し、応答としてJSONオブジェクトを取得します。 UserIDを入力するとJSONオブジェクト（テスト済みで機能しています）を取得できますが、認証時に突っ込んでしまいます。

ユーザーが[ログイン]ボタンをクリックすると、ユーザーが見つかった場合にユーザー名のメッセージを表示するモーダル（オンモード）ウィンドウが表示されますが、ユーザーがいなければLOGIN FAILと表示されます見つかりました。

モーダルウィンドウではなく、これを処理する方がいいでしょうか？

以下は私のコードです。以下は、返されるJSONの例です。

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

もAPIコールを扱うコントローラがあり、私がユーザー名を取得することができていて、これはOK働いていると仮定することができます - しかし、単に認証に立ち往生。

<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> 

login.htmlには、これは、より良いおそらくアプリ・コントローラで処理されますか？私はあなたの質問から得たものに基づいて

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

：

あなたは（$ http.getの成功ループで$scope.result = false; として$スコープ変数を初期化してみてください）（つまり、ユーザーデータを取得した場合）、それをtrueに設定することができます。

あなたのモーダルウィンドウでは、私は以下のように変数を定義し

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