Angular js:如何使用" ng-repeat"来一次拍摄2个数据?

时间:2014-07-11 12:33:41

标签: angularjs angularjs-directive angularjs-scope angularjs-ng-repeat angular-ui

我想通过" angularJS"来实现这样的目标。

var myData = [ "Data1", "Data2", "Data3", "Data4", ... ];

var cDom = "";

for(var i=1;i<totalLength;i++) 
{
    cDom = cDom + "<div>";

    cDom = cDom + "<span>"+myData[i]+"</span>";

    i = i+1;

    cDom = cDom + "<span>"+myData[i]+"</span>"

    cDom = cDom + "</div>";
}

输出DOM应该是:

<div>
    <span>Data1</span>
    <span>Data2</span>
</div>
<div>
    <span>Data3</span>
    <span>Data4</span>
</div>

...

我通过创建单独的服务块和所有(创建一个新的json)来实现这一点。但我需要在模板中用一些方法来处理这个问题。

有可能吗? AngularJS的初学者。请提出一些方法..

3 个答案:

答案 0 :(得分:2)

如果您不担心dom结构,可以使用$even$odd对两个相邻元素进行分组,同时使用ng-repeat

进行迭代
<div ng-repeat="data in myData">
    <span ng-if="$even">{{data}}</span>
    <span ng-if="$odd">{{data}}<hr></span>
</div>

<强> jsfiddle

答案 1 :(得分:1)

你可以这样做:

<div ng-repeat='data in myData'>
  <span ng-if='$index % 2 == 0'>{{data}}</span>
  <span ng-if='$index % 2 == 0 && ($index+1)<myData.length'>{{myData[$index+1]}}</span>
</div>

演示:http://plnkr.co/edit/aOI211jDIpQ2YnHk9Djk?p=preview

答案 2 :(得分:0)

你可以用ng-repeat和ng-if分隔你的数据, 这是一个例子

<table><tbody class="dates">
                    <tr>
                        <td ng-repeat="data in datas" ng-if="$index < 3">
                            <span>
                                {{data}}
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td ng-repeat="data in datas" ng-if="$index > 2">
                           <span>
                                {{data}}
                            </span>
                        </td>
                    </tr>
                </tbody></table>