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

enter image description here

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

Popular posts from this blog

java - Spring Data JPA: Why findOne(id) executing delete query internally? -

python - Mongodb How to add addtional information when aggregating? -

java - Incorrect order of records in M-M relationship in hibernate -