javascript - Angular - 添加基于 JSON 数据的样式

Question

我正在编写我的第一个 Angular 应用程序 - 不确定如何最好地描述它，所以如果它已经得到回答，请原谅。

我正在使用 ng-repeat 来显示一些 JSON 数据:

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

我在 graphBar 类中拥有的那个 div 包含我正在设置的一些 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 的百分比处理它，然后再处理它分区？

如有任何帮助，我们将不胜感激。

谢谢

Answer 1

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

可能的数据格式:

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

Angular 应用:

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了解更多详情。

最终结果: