Alan Alan - 2 months ago 8
AngularJS Question

Is there a way I can stop the flashing as one ng-show takes over from another?

I am using this code to show a different icon depending on the status. But as it moves from one to another there's a flash where it seems neither shows up. Is there some way I could fix this or simplify my method:

<span class="fa fa-circle-o fw"
ng-show="row.statusId == Status.NotSet"
style="padding-left: 0.3rem;"></span>
<span class="fa fa-unlock fw"
ng-show="row.statusId == Status.Clean"
style="padding-left: 0.3rem;"></span>
<span class="fa fa-wrench fw"
ng-show="row.statusId == Status.Dirty"
style="padding-left: 0.3rem;"></span>
<span class="fa fa-cloud-upload fw"
ng-show="row.statusId == Status.Saving"
style="padding-left: 0.3rem;"></span>
<span class="fa fa-check fw"
ng-show="row.statusId == Status.Saved"
style="padding-left: 0.3rem;"></span>
<span class="fa fa-warning fw"
ng-show="row.statusId == Status.SaveError"
style="padding-left: 0.3rem;"></span>

Answer

@raina77ow is correct..use ng-class here...it can accept a function...here is some pseudo code

html:

<div id="rows-container" ng-repeat="row in rows">
  <span ng-class="getStatus(row.statusId)" style="padding-left: 0.3rem;"></span>
</div>

js:

$scope.getClassBasedOnStatus = function(statusId) {
  switch (statusId) {
    case 'Status.NotSet':
      return 'fa fa-circle-o fw';
      break;
    case 'Status.Clear':
      return 'fa fa-unlock fw';
      break;
    case 'Status.Dirty':
      return 'fa fa-wrench fw';
      break;
    // etc...
  }
}

check out this fiddle: https://jsfiddle.net/L1Lshjvz/1/

Comments