Question

我想要实现的目标：我想要实现的是在ng-repeat循环中每2个元素之后添加一行新的ul

例如

                 <ul class="col-sm-2">
                            <li><p>Automobile & Motorcycle</p></li>
                            <li><a href="#">Diagnostic Tools</a></li>


                  </ul>  
                   <ul class="col-sm-2">
                            <li><p>Automobile & Motorcycle</p></li>
                            <li><a href="#">Diagnostic Tools</a></li>


                   </ul>

我怎么能在ng-repea t？

中这样做

是否有使用ng-repeat-start/end

的可能性

我还没能在角度视图中尝试任何事情，因为我无法为此做出任何逻辑抱歉，但我可以通过java脚本完成此操作

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;

或

$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);

问题是他们干净利落的任何角色方式吗？

Answer 1

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="one">
     <div ng-repeat="b in getLength()  track by $index">
        <ul ng-repeat="a in getArray($index)">
            <li><p>{{a}}</p></li>
        </ul>
     </div>
     <script>
       var app=angular.module("app",[]);
       app.controller("one",function($scope){
        $scope.data=['one','two','three','four'];
         $scope.getLength=function(){
           console.log($scope.data.length/2);
           return new Array($scope.data.length/2);
         };
         $scope.getArray=function(index){
           var temparray;
           console.log(index);
              temparray= $scope.data.slice(index*2,index*2+2);
              console.log(temparray)
          return temparray;
         }
       })
     </script>
  </body>

Plunker链接： - “http://plnkr.co/edit/s3ZMCnWdjG2VI6HNdlVp?p=preview”

Answer 2

我还无法添加评论，因此我根据@squiroid回答提出建议。他的建议是漂亮关闭，但不完全。在他的示例中，<div/>的行为方式与<ul/>的行为方式相同，但<ul/>仍在为每个项目重复。我还通过将赔率作为一个链接来包括偶数和奇数<li/>之间的区别。

Plunker链接：http://plnkr.co/edit/s72vWHPJ1CIOzrmlPfHg?p=preview

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@*" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
</head>

<body ng-app="app" ng-controller="myController">
  <ul ng-repeat="group in getGroups() track by $index">
    <li ng-repeat="data in getDataByGroup($index)">
        <p ng-if='$even'>{{data}}</p>
        <p><a href='#' ng-if='$odd'>{{data}}</a></p>
    </li>
  </ul>
  <script>
    var app = angular.module("app", []);
    app.controller("myController", function($scope) {
      $scope.data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

      $scope.getGroups = function() {
        return new Array($scope.data.length / 2);
      };

      $scope.getDataByGroup = function(index) {
        return $scope.data.slice(index * 2, index * 2 + 2);
      }
    })
  </script>
</body>

Answer 3

您可以使用ng-show和重复元素的$ index。使用条件（$ index％2 == 0）检查索引是否均匀：

<ul class="col-sm-2" ng-show="$index%2==0"></ul>

希望有所帮助。

如何在ng-repeat中的某个特定索引上开始新行？

3 个答案: