在ng-repeat中實現ng樣式

我在ng-repeat中使用ng樣式。 ng樣式將引用我在控制器中所做的條件。下面是我的HTML片段：在ng-repeat中實現ng樣式

<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'顏色。如果我有'2'，'3'和's2'，它們全都是紅色的。我可以做些什麼修改，使ticlist.status中的每一個都有自己的bgColor？

來源

2015-06-08 Coolguy

爲什麼您使用$ rootScope？ – vidriduch

除了使用$ scope而不是$ rootScope，您可以將bgColor屬性添加到相應的數字，以便您可以在ngStyle中執行number.bgColor或將bgColor [$ index]添加到您當前的ng樣式 – Eylen

numbers屬性是項目我從本地存儲獲得。它將被推送到ticlist，其中一個數據是我得到ticlist.status的地方。 – Coolguy

有很多方法可以解決這個問題，但是呢？

CSS：

.s1 { 
    background-color: red; 
} 
.s2 { 
    background-color: green; 
} 
.s3 { 
    background-color: blue; 
}

HTML：

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

來源

2015-06-08 07:57:35 TriangleJuice

謝謝。但有沒有使用js的答案？ – Coolguy

在ng-repeat中實現ng樣式

回答

相關問題