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的百分比再到该div？

任何帮助都将不胜感激。

由于

Answer 1

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

可信数据格式：

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

Angular app：

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。

最终结果：

Answer 2

您想使用ng-style之类的内容。

类似的东西：

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

Angular - 基于JSON数据添加样式

2 个答案: