Question

我正在使用ng-repeat迭代数组来生成<li>。但我想将每{2} li堆叠到div。

<li ng-repeat="item in items">{{item.name}}</li>

我希望输出如下：

<ul>
   <div>
       <li>A</li>
       <li>B</li>
   </div>
   <div>
       <li>C</li>
       <li>D</li>
   </div>
</ul>

我应该如何用ng-repeat实现这一目标？提前感谢您的帮助。

Answer 1

在ul上应用ng-repeat，li将作为将为每个项目生成的模板。

前：

<ul ng-repeat="item in items">
        <li>{{item.name}}</li>
     </ul>

这将导致

<ul>
   <li>name1</li>
   <li>name2</li>
   <li>name2</li>
</ul>

如果你有一个由10个项目组成的集合，你可以将它们分成多个大小为2的集合，然后对div上的每个集合应用ng-repeat以获得你想要的输出。

Answer 2

虽然把div放在ul里面是无效的但是要说明。我已经创建了一个函数将您的数组拆分为包含在数据包

中的2元素数组

或者您也可以使用拼接方法

工作演示1

＆＃13;

angular.module('testApp',[]).controller('testCtrl', function($scope) {
  $scope.items=['1','2','3'];
  
  
  $scope.groupByTwo = function (array)
    {
    var newarray =[];
    index=0;
    for(a=0;a<array.length;a++){
       if(a==0 || a%2==0){
          newarray[index]=[];
          newarray[index].push(array[a]);
      }else{
         newarray[index].push(array[a]);
      }
    if(a!=0)
    index++;
    
    }
  return newarray;
}
  $scope.items=$scope.groupByTwo($scope.items);
});

＆＃13;

div {
  background:pink; 
  border:1px dotted black;
  margin-top:15px;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">
  

<ul>
   <div  ng-repeat="item in items">
       <li ng-repeat="i in item">{{i}}</li>
       
   </div>
   
</ul>

＆＃13;

工作演示2

您也可以使用拼接方法

＆＃13;

angular.module('testApp',[]).controller('testCtrl', function($scope) {
  $scope.items=['1','2','3'];
  var i,j,temparray=[],chunk = 2;
  for (index=0,i=0,j=$scope.items.length; i<j; i+=chunk,index++) {
    temparray [index]= $scope.items.slice(i,i+chunk);
   }
   $scope.items =temparray;
  
 
});

＆＃13;

div {
  background:pink; 
  border:1px dotted black;
  margin-top:15px;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">
  

<ul>
   <div  ng-repeat="item in items">
       <li ng-repeat="i in item">{{i}}</li>
       
   </div>
   
</ul>

＆＃13;

如何使用ng-repeat </li>将<li>堆叠成div

2 个答案: