ng-repeat：访问对象数组中每个对象的键和值

Posted 2023-03-05

【中文标题】ng-repeat：访问对象数组中每个对象的键和值

【英文标题】：ng-repeat: access key and value for each object in array of objects

【发布时间】：2013-11-01 22:03:38

【问题描述】：

我有一个对象数组，我正在使用ng-repeat 来迭代它们，这很容易。数组看起来像这样：

$scope.steps = [
    companyName: true,
    businessType: true,
    physicalAddress: true
];

我的ng-repeat 属性看起来像：

<div ng-repeat="step in steps"> ... </div>

在每次迭代中，step 等于其中一个对象，正如预期的那样。无论如何都可以访问step 对象的键和值吗？这样我就可以做这样的事情：

<div ng-repeat="(stepName, isComplete) in steps"> ... </div>

stepName == 'companyName' 和 isComplete == true。我试过做这件事，但stepName 总是最终成为 step 对象的索引（这是有道理的）。我只是想弄清楚是否有另一种方法可以编写ng-repeat 语法，以便我可以获取键和值。

感谢您的任何想法/建议。非常感谢。

PS。我目前的解决方法是在我的控制器中执行此操作：

$scope.stepNames = [];
angular.forEach($scope.steps, function(isComplete, stepName)
     $scope.stepNames.push(stepName: stepName, isComplete: isComplete);
);

然后对其进行迭代，但最好在视图中完成所有操作

【参考方案1】：

这是另一种方式，无需嵌套中继器。

来自Angularjs docs：

可以让 ngRepeat 迭代一个 使用以下语法的对象：

<div ng-repeat="(key, value) in steps"> key : value </div>

【讨论】：

仅适用于 $scope.steps = companyName: true, businessType: true, physicalAddress: true ;

不适用于原始请求 $scope.steps = [ companyName: true, businessType: true, physicalAddress: true ];

【参考方案2】：

似乎在 Angular 1.3.12 中你不再需要内部 ng-repeat，外部循环返回集合的值是单个映射条目

【参考方案3】：

中继器中的中继器

<div ng-repeat="step in steps">
    <div ng-repeat="(key, value) in step">
        key : value
    </div>
</div>

【讨论】：

有没有办法做到这一点，而不必为我的每一步创建两个<div>s？我可以让它工作，但不得不调整我的 CSS 以解决额外的 <div>...

似乎有点痛苦

嗯，你有两次迭代，所以没有（不是我所知道的，可能是错误的）。您必须首先迭代数组，然后是键，所以内部循环是我能想到的唯一解决方案。

好的，听起来不错。我只是希望有一些我不知道的很酷的ng-repeat 语法，比如ng-repeat="(key,val) for step in steps" 或类似于ng-options 的东西。不过感谢您提供的信息。

是的，我现在正在查看文档，看看是否有任何内容弹出。

您可以通过编写指令并让链接函数操作数据来解决这个问题。

【参考方案4】：

我认为问题在于您设计数据的方式。对我来说，就语义而言，它只是没有意义。步骤究竟是做什么用的？

是否存储了一家公司的信息？

如果是这种情况，步骤应该是一个对象（请参阅 KayakDave 的回答），并且每个“步骤”都应该是一个对象属性。

是否存储了多家公司的信息？

如果是这样，步骤应该是一个对象数组。

$scope.steps=[companyName: true, businessType: true,companyName: false]

在任何一种情况下，您都可以轻松地使用一个（第二种情况是两个）ng-repeats 遍历数据。

【参考方案5】：

其实你的数据设计得不好。你最好使用类似的东西：

$scope.steps = [
    stepName: "companyName", isComplete: true,
    stepName: "businessType", isComplete: true,
    stepName: "physicalAddress", isComplete: true
];

那么就很容易做你想做的事了：

<div ng-repeat="step in steps">
 Step step.stepName status : step.isComplet
</div>

示例：http://jsfiddle.net/rX7ba/

【讨论】：

我认为 KayakDave 的设计更好，但如果不确切知道数据的用途，就很难判断。

我不认为将属性值设计为键的对象是个好主意。证明是对象必须通过它的键/值对来检查，这是一种反射。无论如何，如果提供的解决方案更适合...好吧，我们不知道究竟如何处理数据。

【参考方案6】：

如果这是您的选择，如果您将数据转换为对象形式，它会按照我认为您希望的方式工作：

$scope.steps = 
 companyName: true,
 businessType: true,
 physicalAddress: true
;

这是一个小提琴：http://jsfiddle.net/zMjVp/

【讨论】：

是的，我同意，这似乎是一个更好的数据结构。不过，如果不确切知道数据的用途，就很难判断。

这不会保留键值对的顺序，以防您希望保留它。

从数据结构来看，顺序很重要。