Question

我使用此代码根据状态显示不同的图标。但是当它从一个移动到另一个时，有一个似乎既没有出现的闪光。有什么方法可以解决这个问题或简化我的方法：

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

@ raina77ow是正确的..在这里使用ng-class ...它可以接受一个函数......这里有一些伪代码

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

看看这个小提琴：https://jsfiddle.net/L1Lshjvz/1/

Answer 2

我发现ng-switch在这种情况下效果最佳。

您可以像以下一样使用它：

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

有没有办法可以阻止闪烁，因为一个ng-show接管另一个？

2 个答案: