Question

我在ng-repeat中使用ng-style。 ng-style将参考我在控制器中所做的条件。以下是我的html片段：

    <a class="item item-icon-left dark" ng-repeat="number in numbers">
      <span class="badge badge-balanced" ng-style="{'background' : bgColor}">{{number.status}}</span>
    </a>

以下是我的js片段：

.controller('Ctrl', function($rootScope) {

  $rootScope.numbers = [];
  $rootScope.bgColor = [];
  for(var i=1;i<=amt;i++)
  {
      var ticlist = JSON.parse(localStorage.getItem('storage' + i));
      $rootScope.numbers.push(ticlist);

      if (ticlist.status == "s1")
          $rootScope.bgColor[i-1] = "blue";
      else if (ticlist.status == "s2")
          $rootScope.bgColor[i-1] = "red";
      else if (ticlist.status == "s3")
          $rootScope.bgColor[i-1] = "green";
  }
)};

但我遇到的问题是显示的bgColor将跟随上一个ticlist.status。例如，如果我有3 ticlist.status并且它们是's1'，'s2'和's3'，则所有这些都将遵循's3'的颜色，即绿色。如果我有's2'，'s3'和's2'，那么它们都将是红色的。我可以进行哪些更改，以便每个ticlist.status都有自己的bgColor？

Answer 1

有很多方法可以解决这个问题，但是这个呢？

CSS：

<a class="item item-icon-left dark" ng-repeat="number in numbers">
    <span class="badge badge-balanced {{number.status}}">{{number.status}}</span>
</a>

HTML：

{{1}}

在ng-repeat中实现ng-style

1 个答案: