フィールドがjsから返ってきたときの表示ボタン

Question

dbクエリー（ユーザーとルーム）で割り当てられる2つのフィールドと、ロードするためのdb操作を必要としない送信ボタンを持つフォームを表示するには、 。

私はこのコードを次のように書くと、ボタンが瞬時に表示されていること（何かに依存しないため）とフィールド：randomNameとrandomRoomはdbを必要とするので少し時間がかかる操作。

私がしたいのは、すべてのフォーム（ボタンとフィールドを同時に表示）です。

私は何かの必要があるときにフィールドを-ある-から-DB-ロード--->ボタンでそれらをロード...

おかげ

 <button type="button" ng-click="randomRoomButtonClass=true;getRandomRoom()">Random conversation!</button> 
       <br>   
        <br> 
        <li ng-if="randomRoomButtonClass" style="list-style: none;">{{randomName}}</li> 
        <li ng-if="randomRoomButtonClass" style="list-style: none;">{{randomRoom}}</li> 
        <button type="button" ng-if="randomRoomButtonClass" ng-click="enterRoom({name: randomName,room: randomRoom})">Enter! 
        </button> 

Answer 1

ラップ使用してdiv要素内のHTMLは、 ng-ifディレクティブ。タイムアウトは概念の証明に使用されます。代わりに$ timeoutを差し引いたコールバックになります。

https://jsfiddle.net/53j7749e/

角度

function AppCtrl($scope, $timeout) { 
    $timeout(function() { 
    $scope.randomName = 'Yo'; 
    $scope.randomRoom = 'Hey'; 
    }, 2000); 
} 

HTML

<span ng-if="!randomName">Loading...</span> 
<div ng-if="randomName"> 
    <button type="button" ng-click="randomRoomButtonClass=true;getRandomRoom()">Random conversation!</button> 
    <br> 
    <br> 
    <li>{{randomName}}</li> 
    <li>{{randomRoom}}</li> 
    <button type="button" ng-click="enterRoom({name: randomName,room: randomRoom})">Enter! 
    </button> 
</div> 

Answer 2

回避するには、遅延を使用しています。次のようにng-Showイベントを試してみることができます：

<button type="button" ng-click="randomRoomButtonClass=true;getRandomRoom()" >Random conversation!</button> 
     <br>   
      <br> 
      <li ng-if="randomRoomButtonClass" ng-change="setDelay()" style="list-style: none;">{{randomName}}</li> 
      <li ng-if="randomRoomButtonClass" ng-change="setDelay()" style="list-style: none;">{{randomRoom}}</li> 
      <button type="button" ng-if="randomRoomButtonClass" ng-click="enterRoom({name: randomName,room: randomRoom})" ng-show="delay">Enter! 
      </button> 

コントローラ内に遅延機能を追加できます。

$scope.setDelay = function(){ 
    $scope.delay = true; 
    $timeout(function(){ 
     $scope.delay = false; 
    }, 100); 
}; 

続きを読む： Can ng-show directive be used with a delay