Angular--基於JSON數據添加樣式

我正在寫我的第一個Angular應用程序 - 不確定如何最好地描述這個，所以如果它已經被回答了，不好意思。Angular--基於JSON數據添加樣式

我使用ng-repeat顯示一些JSON數據：

<ul class="no-bullet" ng-repeat="person in persons"> 
    <li>{{person.name}} 
    <div class="graphBar"></div> 
    </li> 
</ul>

該div我有graphBar類包含一些CSS中，我設置

.graphBar { 
background: linear-gradient(to right, 
      $Colour1 0%, $Colour1 33%, 
      $Colour2 33%, $Colour2 55%, 
      $Colour3 55%, $Colour3 80%, 
      $Colour4 80%, $Colour4 100%); 
}

我需要建議的是什麼我如何將{{person.options}}的數據發送到某個函數，以便我可以處理它，以便按CSS的百分比然後再轉換爲該div的百分比？

任何幫助，將不勝感激。

感謝

來源

2016-02-23 userMod2

結帳這一點，如果它看起來像你想要什麼（至少在視覺上）：https://plnkr.co/edit/B0OGpNhpsKTmG3x9vLvy?p=preview – oKonyk

做什麼你想動態改變？百分比，顏色還是兩者？ – oKonyk

兩者 - 我想我將不得不做的是得到這個處理服務器端，所以當數據進來我只是把它放進去。想不到任何其他方式 – userMod2

Here (Plunker)是我的解決方案。

更多鈔票數據格式：

`{ name:'John', colors: {red:33, yellow: 15, green: 10, blue: 20}}`

角應用：

var MyApp = angular.module('MyApp', []); 

MyApp.controller('MyAppCtrl', function($scope){ 
    $scope.styleBuilder = function (colors){ 
     var raw = ['linear-gradient(to right, '] 
     var pointer = 0 
     for (var key in colors){ 
      raw.push(key+ ' ' + pointer + '%, ' + key + ' ' + (colors[key]+pointer) + '%, ') 
      pointer += colors[key]; 
     } 
     if(pointer<100){ //here we are checking if percentages add up to 100% 
      raw.push('#D8E0E3' + ' ' + pointer + '%, ' + '#D8E0E3' + ' ' + 100 + '%') 
     } 
     raw.push(')') 
     return raw.join('') 
    } 

    //example data (use $http to get data from backend) 
    $scope.persons = [ 
     { name:'John', 
      colors: {red:33, yellow: 15, green: 10, blue: 20} 
     }, 
     {name:'Mary', 
      colors: {red:10, yellow: 25} 
     }, 
     {name: 'Piter', 
      colors: {green: 70, blue: 20} 
     } 
    ] 

})

HTML：

<ul class="no-bullet" ng-repeat="person in persons"> 
    <li>{{person.name}} 
     <div class="graphBar" ng-style="{'background': styleBuilder(person.colors)}"></div> 
    </li> 
</ul>

詳情請參閱Plunker。

最終結果：

來源

2016-02-23 20:44:29 oKonyk

你是個傳奇人物！這正是我需要理解的 - styleBuilder這一節，並在$範圍內使用它完美。非常感謝。 – userMod2

當然！樂於幫助！ – oKonyk

你想使用類似ng-style。

喜歡的東西：

<div ng-style="{background: 'linear-gradient(to right, person.options.to, person.options.right)'}"></div>

來源

2016-02-23 17:54:45 Martin

好的 - 但是我怎樣才能把它傳遞給一個函數，因爲我從'person.options'得到的數據將會像'[「classa：5」，「classb：3」，「classc：5」]這樣的數組。 '所以我需要'重新創建'成適當的字符串？ – userMod2

另外 - 我需要獲得變量'$ Colour1'等等，這些都是SASS varibales。我可以從代碼更新css嗎？ – userMod2

您可以更新CSS樣式。不是SASS變量。 – Martin

Angular--基於JSON數據添加樣式

回答

相關問題