Question

我需要从{{compNames}}和{{compDesc}}返回的值交替打印，就像一个自上而下的堆栈。但是对于2 ng重复，我无法以那种格式获得它。

<div class="title">
    <table>
        <tr>
            <td class="comp-names" ng-repeat="compNames in $ctrl.data.compNames track by $index">{{compNames}}</td>
        </tr>
        <tr>
            <td class="comp-desc" ng-repeat="compDesc in $ctrl.data.compDesc track by $index">{{compDesc}}</td>
        </tr>
    </table>
</div>

如果我打印出{{$ ctrl.data}}，我会得到以下内容 -

{
"details": {
    "comp": { 
        "id": "12345",
        "company_name": "Google",
        "date_created": "2018-01-10 18:03:27",
        "file_name":"Admin.txt"
    }
},
"compNames": ["five","nine","twelve"],
"compDesc": [" String combinations"," String combinations"," String manipulation to eval"]
}

我检查了一个类似的线程，并尝试做类似下面的事情，但我认为这是错误的方法，对我不起作用（因此我也给了$ ctrl.data输出） -
< / p>

<div ng-repeat="data in $ctrl.data">
    <div>{{data.compNames}}</div>
    <div>{{data.compDesc}}</div>
</div>

Answer 1

一种解决方案是预先在控制器中对两个阵列执行 zip 操作，然后迭代生成的数组。

这样的事情：

ctrl.combined = ctrl.data.compNames.map(function(value, index){
    return { name: value, desc: ctrl.data.compDesc[index] };
});

然后像这样迭代它：

<tr ng-repeat="comp in $ctrl.combined track by $index">
    <td class="comp-names">{{comp.name}}</td>
    <td class="comp-desc">{{comp.desc}}</td>
</tr>

或者如果你说交替时还有别的想法，你可以这样做：

<tr ng-repeat-start="comp in $ctrl.combined track by $index">
    <td class="comp-names">{{comp.name}}</td>
</tr>
<tr ng-repeat-end>
    <td class="comp-desc">{{comp.desc}}</td>
</tr>

请注意，您需要向map - 函数添加额外的逻辑，以防您希望两个数组的长度不同。但根据您的数据，这似乎不是一个问题。

Answer 2

如果你的compNames的长度等于compDesc，你可以在ng-repeat中使用length来多次迭代长度

JS

$scope.getNumber = function() {
    return new Array( $scope.data.compNames.length);
}

HTML

<div ng-repeat="i in getNumber() track by $index">
    <div>{{data.compNames[$index]}}</div>
    <div>{{data.compDesc[$index]}}</div>
</div>

demo

交替显示2 ng重复的结果

2 个答案: