如何为由 ng-repeat 迭代的每个名称和值添加单独的宽度

How can I add separate width to each name and value that are getting iterated by ng-repeat

本文关键字：添加 单独 ng-repeat 迭代      更新时间：2023-09-26

如何向迭代的每个名称和值添加单独的width：

ng-repeatin angularJS

例如：这是我的数据：

[
{
    "name": "First Name",
    "value": "Harry"
},
{
    "name": "Last Name",
    "value": "Potter"
},
{
    "name": "Gender",
    "value": "Male"
},
{
    "name": "DOB",
    "value": "21/5/1988"
},
{
    "name": "SSN",
    "value": "298456147"
}]

.HTML：

<div>
  <div ng-repeat=' "data in data'">
    <div style=' "float:left'">{{data.name}}</div>
    <div style=' "float:left'">{{data.value}}</div>
  </div>
</div>

因此，对于每个名称和值，我需要单独的width。

在哪里可以添加宽度属性？

添加"按$index跟踪"子句，如 ng-repeat 的文档中所述。

ng-repeat="opt in data track by $index"

然后你可以使用 {{opt.name}} 和 {{opt.value}} 并将它们放在具有不同样式的不同 html 元素中。

您可以创建一个可能宽度的数组，例如

$scope.widthArray = ['100px','300px','200px']

然后在 ng 重复元素中设置宽度，如下所示

ng-style="{width: widthArray[$index]}"

您可以根据需要在数组中排列宽度。

相关文章：