show button when fields return from js

Question

I am using angular to show a form which have 2 fields that are being assign via db query (user and room) and a submit button (which doesn't need any db operation to load).

what happens, when I write this code below, is that the button is being shown instantly (since it doesn't depened on anything) and the fields: randomName, and randomRoom take a bit time to load since they need db operation.

what I want is to show all the form (button and fields at the same time).

I need something of when-fields-are-loaded-from-db ---> load them with button...

Thanks

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

Rob · Accepted Answer · 2016-08-09 17:58:17Z

1

Wrap the html in a div using an ng-if directive. The timeout is used for proof of concept. This would be in your callback instead, minus the $timeout.

https://jsfiddle.net/53j7749e/

Angular

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>

answered Aug 9, 2016 at 17:58

Rob

1,8502 gold badges12 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:22:55Z

A work around is using a delay. You can try using the ng-Show event:

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

You can add a delay function within your controller.

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

Read More: Can ng-show directive be used with a delay

Collectives™ on Stack Overflow

show button when fields return from js

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related