Reputation: 24572
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
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
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