Angular ngRepeat - 每个元素的独特风格答案

【问题标题】：Angular ngRepeat - Unique style for every elementAngular ngRepeat - 每个元素的独特风格
【发布时间】：2015-02-23 18:09:45
【问题描述】：

所以我的问题是我在 Angular 中使用 ng-repeat 并且每个项目都需要有特定的样式。

我重复并从包含名称和值的 JSON 中创建不同的列表项。名称和值并显示，但每个元素也有一个进度条。条的值（宽度）应取决于每个元素的值。

这是一个演示： http://jsfiddle.net/15yb42tj/

正如您在小提琴中看到的，栏的宽度是 50%（在 CSS 中是默认值）。但是，例如第二个元素 Karl 的值为 4，我希望条形的宽度为 40%。

基本上我想对每个元素做的是：

$scope.bar_style = {
    'width' : "(parts.value)*10"
}

我一直在尝试不同的策略，但老实说，我只是在黑暗中拍摄，这里有人知道如何在 ngRepeat 中设置特定元素的样式吗？

【问题讨论】：

标签： javascript html css angularjs angularjs-ng-repeat

【解决方案1】：

您也可以使用以下解决方案

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

function MyCtrl($scope) {

    $scope.parts = [
        {name: "hello", value : 5},
        {name: "Karl", value : 4},
        {name: "Ba", value : 3}

        ];

    $scope.getStyle = function(value)
    {
        var obj = {
            'background-color': 'green',
            'width': parseInt(240/value) + 'px',
            'height': '20px'
        };

        return obj;
    };
}

li .progress_div{
    width: 350px;
    margin-left: 50px;
    display: table-cell;
    margin-left: 150px;
}

li .progress_div .progress_bar{
    border:1px solid black;
    width: 240px;
}

<div ng-controller="MyCtrl">
    <ul>
        <li ng-repeat="part in parts">
            {{part.name}}
         <div class="progress_div">
                <div class="progress_bar">
                    <div ng-style = "getStyle(part.value)"></div>
                </div>
        </div>
            {{part.value}}
        </li>
    </ul>    
</div>

【讨论】：

【解决方案2】：

另一种方式，虽然我认为 Pavel 的方式更好

http://jsfiddle.net/TheRodeo/svy65fa9/

li .progress_div .progress_bar > div.width-3{
    width: 30%;
}
li .progress_div .progress_bar > div.width-4{
    width: 40%;
}
li .progress_div .progress_bar > div.width-5{
    width: 50%;
}

和

<div ng-style="bar_style" class="width-{{part.value}}"></div>

【讨论】：

【解决方案3】：

简单的就地样式计算：

<div ng-style="{'width': part.value*10+'%'}"></div>

成功了。

http://jsfiddle.net/15yb42tj/2/

【讨论】：