How can I implement a loading mask/image for a $http request that loads data for a <select> tag on my webpage? I want the loading mask/image to only cover the specific section of the page where the data is being loaded.
Here's the HTML code:
<select ng-model='widgetType' ng-options="widget.name for widget in allWidgets track by widget.id">
<fieldset id="needs-loading-mask" ng-disabled="widgetType.id">
<div z-index=100 ng-if="loadingVariants"><img src="img/loading.gif" /></div>
<select ng-model='widgetVariant' ng-optoins="variant.name for variant in allVariants track by variant.id>
<fieldset>
And here's the JavaScript code:
$scope.$watch('widgetType.id', function(newValue, oldValue) {
if(newValue) {
$scope.loadingVariants = true;
console.log("Getting variants from server");
$timeout(function() { // for debug purposes
$http.get('/api/widget-variants/?widget=' + newValue)
.success(function (data) {
$scope.allVariants = data;
$scope.loadingvariants = false;
}).error(function (data) {
$scope.loadingvariants = false;
});
}, 1000);
} else {
$scope.allVariants = [];
}
});
I'm trying to figure out how to overlay a loading mask over #needs-loading-mask while $scope.loadingVariants is true. I need it to appear above the select dropdown element inside the parent fieldset using declarative syntax.
Removing the select element isn't an option as it affects tab order. Is there a way to position something in front of it without disrupting functionality?