Question

所以我的问题是我在Angular中使用ng-repeat并且每个项目都需要具有某种风格。

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

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

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

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

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

我一直在尝试不同的策略，但说实话，我刚刚在黑暗中拍摄，有没有人知道如何在ngRepeat中设置某个元素的样式？

Answer 1

简单的就地风格计算：

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

诀窍。

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

Answer 2

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

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>

Answer 3

另一种方式虽然我认为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>

Angular ng Repeat - 每个元素的独特风格

3 个答案: