Question

我使用angular来显示一个表单，其中有2个字段通过db查询（用户和房间）和一个提交按钮（不需要任何db操作加载）进行分配。

当我在下面编写这个代码时，会发生什么事情，因为按钮正在显示（因为它不依赖于任何东西）和字段：randomName和randomRoom需要一点时间来加载，因为它们需要数据库操作。

我想要的是同时显示所有表格（按钮和字段）。

我需要一些when-fields-is-loaded-from-db ---＆gt;用按钮加载它们......

谢谢

        <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

使用ng-if指令将html包装在div中。超时用于概念验证。这将在你的回调中，减去$ 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

字段从js返回时显示按钮

2 个答案: