[AngularJS]角-添加样式基于 JSON 数据

发布时间: 2017/4/16 20:45:13
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我在写我首个角应用程序-不是很确定如何最好地描述这个这样的借口,我如果它已经被回答。

我使用 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 吗?

任何帮助将不胜感激。

谢谢你

解决方法 1:

这里 (呆瓜)是我的解决方案。

主控数据格式︰

`{ 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>

更多详细信息,请参阅呆瓜

最终的结果︰

enter image description here

赞助商