show button when fields return from js
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>
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>