使用 ng-repeat 和 $index 传递二维数组答案

【问题标题】：Pass through bi-dimensional array with ng-repeat and $index使用 ng-repeat 和 $index 传递二维数组
【发布时间】：2018-03-22 18:48:10
【问题描述】：

有这个输入：

myArray = [
            {name: "name1", id: 1, parameters: ["first", "second"]},
            {name: "name2", id: 2, parameters: ["first"]},
            {name: "name3", id: 3, parameters: ["first", "second"]},
];

我想把它放在桌子上看起来像这样：

我试过了，前两列是正确的，但最后一列没有出现：

<tr ng-repeat="rows in $ctrl.name track by $index">
    <td>{{$ctrl.name[$index]}}</td>
    <td>{{$ctrl.id[$index]}}</td>
    <td><span ng-repeat="rows in $ctrl.parameters[$index] track by $secondIndex">{{$ctrl.parameters[$index][$secondIndex]}}</span></td>
</tr>

错误信息是

错误：[ngRepeat:dupes] 不允许在转发器中重复。利用 'track by' 表达式以指定唯一键。

所以可能两个 ng-repeat 不是解决方案，但它不知道如何做到这一点。有什么想法吗？

【问题讨论】：

我认为第二个ng-repeat 也需要track by $index，如果需要，可以使用$parent.$index 访问父循环的索引

标签： javascript angularjs angularjs-ng-repeat

【解决方案1】：

这也应该有效：

<tr ng-repeat="item in myArray">
  <td>{{item.name}}</td>
  <td>{{item.id}}</td>
  <td>
    <span ng-repeat="subItem in item.parameters">{{subItem}}</span>
   </td>
 </tr>

【讨论】：

【解决方案2】：

好吧，你应该在myArray 上使用ng-repeat，然后显示你想要的任何内容。

要以所需格式显示parameters，您可以使用row.parameters.toString().replace(',', ' ')

请检查工作片段

谢谢

var app = angular.module('myApp', []);
app.controller('ctrl', function($scope){
$scope.myArray = [
            {name: "name1", id: 1, parameters: ["first", "second"]},
            {name: "name2", id: 2, parameters: ["first"]},
            {name: "name3", id: 3, parameters: ["first", "second"]},
];

})

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
<table >
  <tr>
    <th>Name</th>
    <th>Id</th>
    <th>Parameters</th>
  </tr>
  <tr ng-repeat="row in myArray">
    <td>{{row.name}}</td>
    <td>{{row.id}}</td>
    <td>{{ row.parameters.join(' ') }}</td>
   </tr>
</table>
</div>

【讨论】：

parameters.toString().replace(',', ' ') = parameters.join(' ')
哦，是的。这是一个更好的选择:) 谢谢。我会更新

【解决方案3】：

Aleksey Solovey提出的解决方案解决了这个问题：

<tr ng-repeat="rows in $ctrl.name track by $index">
    <td>{{$ctrl.name[$index]}}</td>
    <td>{{$ctrl.id[$index]}}</td>
    <td><span ng-repeat="rows in $ctrl.parameters[$index] track by $index">{{$ctrl.parameters[$parent.$index][$index]}}</span></td>
</tr>

【讨论】：

不要为此使用 ng-repeat。这是一个简单的字符串数组： $ctrl.parameters.join(' ')

【解决方案4】：

使用这个

<tr ng-repeat="rows in myArray track by $index">
    <td>{{ rows.name }}</td>
    <td>{{ rows.id }}</td>
    <td><span ng-repeat="data in rows.parameters track by $index">{{ data+ " " }}</span></td>
</tr>

【讨论】：