Javascript 当字段从js返回时显示按钮

我使用angular来显示一个表单，它有两个字段，通过db查询（用户和房间）和一个提交按钮（不需要任何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>

随机对话！




{{randomName}
{{randomRoom}
进来！

使用ng if指令将html包装在div中。超时用于概念验证。这将出现在回调中，减去$timeout

棱角的

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

HTML

正在加载。。。
随意交谈！




{{randomName}
{{random room}}
进来！

使用ng if指令将html包装在div中。超时用于概念验证。这将出现在回调中，减去$timeout

棱角的

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

HTML

正在加载。。。
随意交谈！




{{randomName}
{{random room}}
进来！

解决方案使用延迟。您可以尝试使用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>

阅读更多：

---

解决方案使用延迟。您可以尝试使用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>

阅读更多：