Html 使用 ng-repeat 同时循环多个数组

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/30846032/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 11:39:09  来源:igfitidea点击:

looping multiple arrays simultaneously with ng-repeat

htmlangularjs

提问by Rus Paul

Can I traverse two arrays simultaneously using only one ng-repeatin AngularJs? If so, then how?

我可以ng-repeat在 AngularJs 中只使用一个数组同时遍历两个数组吗?如果是,那又如何?

For example I have two arrays

例如我有两个数组

array1 = [1,2,3,4,5]

array2 = [6,7,8,9,10]

It should be able to produce the same index for both the arrays.

它应该能够为两个数组生成相同的索引。

回答by Rus Paul

If you want to acces the second array with the index of the first, try this:

如果要使用第一个数组的索引访问第二个数组,请尝试以下操作:

$scope.arr1 = [1, 2, 3, 4, 5]
$scope.arr2 = [6, 7, 8, 9, 10]

<div ng-repeat="number in arr1">
    Number from array1 = {{number}}
    Number from array2 = {{arr2[$index]}}
</div>

See this fiddle: http://jsfiddle.net/dm9zhgx9/

看到这个小提琴:http: //jsfiddle.net/dm9zhgx9/

回答by jbigman

From my knowledge, Angular does not implement something to iterate over multiple arrays.

据我所知,Angular 没有实现迭代多个数组的东西。

One solution would be to concat arrays, and iterate over result.

一种解决方案是连接数组,并迭代结果。

Try this:

尝试这个:

<div ng-repeat="item in [1,2,3,4,5].concat([6,7,8,9,10])">
    {{item}}
</div>

回答by kTT

If you want to use ngRepeatfor combination of two arrays use javascript concat()function (AngularJS allows variable in expressionin ngRepeat directive).

如果你想使用ngRepeat来组合两个数组,请使用 javascript concat()函数(AngularJS 允许variable in expression在 ngRepeat 指令中使用)。

<div ng-repeat="item in array1.concat(array2)">{{item}}</div>

回答by M Thomas

Angular

$http.get("json/timeline.json")
        .then(function(response) {
            var datalen = response.data.tline.length;           
            for (var i=0; i<datalen; i++){
                vm.eventlist.push(response.data.tline[i]);
                vm.hpos.push({ 'left' : pos * i + 'px'});
            }

        });

HTML

HTML

<li ng-repeat="event in vm.eventlist">
                            <section class="timeline-event past-event" ng-style="{{vm.hpos[$index]}}">