Alan2
Alan2

Reputation: 24572

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>

Upvotes: 0

Views: 30

Answers (2)

Ronnie
Ronnie

Reputation: 11198

@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/

Upvotes: 3

plong0
plong0

Reputation: 2188

I have found ng-switch works the best in this case.

You can use it like:

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

Upvotes: 1

Related Questions