javascript - Angular: Using ngShow and Hide to remove spinner if no data returned -
i have below html displays spinner until list of tags displays application. however, spinner continues if there no events exist either.
i'd spinner disappear , input blank or return message user there no tags app. not sure how whilst keeping code clean!
html:
<div ng-show="noun === 'tag'"> <div class="spinner" ng-hide="loadedtags()"> <i class="fa fa-spinner fa-pulse"></i> </div> <div ng-show="loadedtags()"> <select ol-filter-select="tags" ng-model="tagname"> <option ng-value="name" ng-repeat="name in tagnames()" ng-bind="name" ng-selected="tagname === name"> </option> </select> </div> </div> controller:
$scope.loadedtags = function() { return !_.isempty($scope.tags); }; view:
spinner keeps spinning if there's no tags...

i think need show more of code loading tags. loading tags server via $http.get or similar? if so, typically way done have boolean scope variable represents fact loading in progress. variable control whether spinner visible. example, have common code looks this:
constructor angular controller:
$scope.loadinginprogress = true; $http.get(myurl) .then(function(result) { // success function $scope.tags = result.data; $scope.loadinginprogress = false; }, function() { // failure function $scope.loadinginprogress = false; }); html:
<div class="spinner" ng-show="loadinginprogress"> <i class="fa fa-spinner fa-pulse"></i> </div> it seems you're trying avoid scope variable represent loading state, you're trying calculate loading state based on results of load. that's not reliable. results of load anything, , doesn't indicate whether loading in progress.
Comments
Post a Comment