Javascript 角度重复-每个元素的独特风格

所以我的问题是，我在Angular中使用ng repeat，每个项目都需要有特定的风格

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

这是一把小提琴，它展示了：

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

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

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

---

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

简单的就地样式计算：

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

这就是诀窍

---

简单就地样式计算：

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

这就是诀窍

---

另一种方式，尽管我认为帕维尔的方式更好

及

---

另一种方式，尽管我认为帕维尔的方式更好

及

---

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

var myApp=angular.module（'myApp'，[]）；
函数MyCtrl（$scope）{
$scope.parts=[
{name:“hello”，值：5}，
{名称：“卡尔”，值：4}，
{名称：“Ba”，值：3}
];
$scope.getStyle=函数（值）
{
var obj={
“背景色”：“绿色”，
“宽度”：parseInt（240/值）+“px”，
“高度”：“20px”
};
返回obj；
};
}

li.progress\u div{
宽度：350px；
左边距：50像素；
显示：表格单元格；
左边距：150像素；
}
李.进度分区.进度条{
边框：1px纯黑；
宽度：240px；
}

{{part.name}
{{part.value}}

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

var myApp=angular.module（'myApp'，[]）；
函数MyCtrl（$scope）{
$scope.parts=[
{name:“hello”，值：5}，
{名称：“卡尔”，值：4}，
{名称：“Ba”，值：3}
];
$scope.getStyle=函数（值）
{
var obj={
“背景色”：“绿色”，
“宽度”：parseInt（240/值）+“px”，
“高度”：“20px”
};
返回obj；
};
}

li.progress\u div{
宽度：350px；
左边距：50像素；
显示：表格单元格；
左边距：150像素；
}
李.进度分区.进度条{
边框：1px纯黑；
宽度：240px；
}

{{part.name}
{{part.value}}

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