交替显示 2 ng-repeat 的结果 [英] To display results of 2 ng-repeats alternately
问题描述
我需要从 {{compNames}} 和 {{compDesc}} 返回的值交替打印,就像自顶向下的堆栈一样.但是对于 2 ng-repeat,我无法以这种格式获得它.
<表格><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>
如果我打印出 {{$ctrl.data}},我会得到以下信息-
<代码>{细节": {补偿":{"id": "12345","company_name": "谷歌","date_created": "2018-01-10 18:03:27","file_name":"Admin.txt"}},"compNames": ["五","九","十二"],"compDesc": [" 字符串组合"," 字符串组合"," 字符串操作到 eval"]}
我检查了一个类似的线程并尝试执行以下操作,但我认为这是错误的方法并且对我不起作用(因此我也给出了 $ctrl.data 输出)-
>
<div>{{data.compNames}}</div><div>{{data.compDesc}}</div>
一种解决方案是预先在控制器中对两个数组执行 zip 操作,然后迭代生成的数组.
像这样:
ctrl.combined = ctrl.data.compNames.map(function(value, index){返回 { 名称:值,描述: ctrl.data.compDesc[index] };});
然后像这样迭代它:
<td class="comp-names">{{comp.name}}</td><td class="comp-desc">{{comp.desc}}</td></tr>或者如果你在说交替时有其他想法,你可以这样做:
<td class="comp-names">{{comp.name}}</td></tr><tr ng-repeat-end><td class="comp-desc">{{comp.desc}}</td></tr><小时>
请注意,您需要向 map
函数添加额外的逻辑,以防您期望两个数组的长度不同.但根据您的数据,这似乎不是问题.
I need the values returned from {{compNames}} and {{compDesc}} to print alternately, like a top-down stack. But with the 2 ng-repeats I'm not able to get it in that format.
<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>
If I print out {{$ctrl.data}}, I get the following-
{
"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"]
}
I checked a similar thread and tried to do something like the following but I think it's the wrong approach and doesn't work for me (hence I have given the $ctrl.data output as well)-
<div ng-repeat="data in $ctrl.data">
<div>{{data.compNames}}</div>
<div>{{data.compDesc}}</div>
</div>
解决方案 One solution is to do a zip-operation on the two arrays beforehand in your controller and then iterate over the resulting array.
Something like this:
ctrl.combined = ctrl.data.compNames.map(function(value, index){
return { name: value, desc: ctrl.data.compDesc[index] };
});
and then iterate over it like this:
<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>
or in case you had something else in mind when you said alternating, you can do something like this:
<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>
Beware that you need to add extra logic to the map
-function, in case you expect the two arrays to be of different lengths. But based on your data, it doesn't seem like that'll be an issue.
这篇关于交替显示 2 ng-repeat 的结果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆