Javascript 如何在ng repeat中的某个特定索引上启动新行？_Javascript_Html_Angularjs

Javascript 如何在ng repeat中的某个特定索引上启动新行？

javascript html angularjs

Javascript 如何在ng repeat中的某个特定索引上启动新行？,javascript,html,angularjs,Javascript,Html,Angularjs,我想实现的是：我想实现的是在ng repeat循环中每2个元素后添加一行ul 比如说 <ul class="col-sm-2"> <li><p>Automobile & Motorcycle</p></li> <li><a href="#">Diagnostic

我想实现的是：我想实现的是在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>

或

$scope.groupByTwo=函数（数组）
{
var newarray=[]；
指数=0；
对于（a=0；a您可以使用ng show和重复元素的$index。使用条件（$index%2==0）检查索引是否为偶数：


希望有帮助。

<!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>


{{a}

var-app=angular.module（“app”，[]）；
应用控制器（“一个”，功能（$scope）{
$scope.data=['1'，'2'，'3'，'4']；
$scope.getLength=function（）{
console.log（$scope.data.length/2）；
返回新数组（$scope.data.length/2）；
};
$scope.getArray=函数（索引）{
向量阵列；
控制台日志（索引）；
temparray=$scope.data.slice（索引*2，索引*2+2）；
console.log（临时数组）
返回数组；
}
})

Plunker链接：-“”我还不能添加评论，所以我根据@squiroid-answer提出了一个建议。他的建议非常接近，但并不完全。在他的例子中，
的行为方式与您希望
的行为方式相同，但
仍在重复每个项目。我还包括了偶数之间的区别奇数
通过将赔率作为一个链接
Plunker链接：



{{data}



var-app=angular.module（“app”，[]）；
app.controller（“myController”，函数（$scope）{
$scope.data=[1,2,3,4,5,6,7,8,9,10]；
$scope.getGroups=函数（）{
返回新数组（$scope.data.length/2）；
};
$scope.getDataByGroup=函数（索引）{
返回$scope.data.slice（索引*2，索引*2+2）；
}
})
尝试使用类似于ng if=“$index%3！==0”的方法
但是这也会隐藏内部元素，你能再详细说明一下吗？谢谢你的回答@squirod，但是有可能只有视图吗？我已经写了js，我也想在视图中这样做。你需要一次两个值来显示在
中，但就我所知，ng重复是不可能的。对不起……”几乎在视图中，除了将数字转换为数组。感谢您的回答@bbennett，但是否可以仅使用视图我已经编写了js，我也想在视图中执行。我不相信有。1.ng repeat
必须放置在元素上，导致该元素渲染n次，除非您使用ng show
或ng if
。2。使用ng show
或ng if
也会阻止子元素的渲染。这两种方法都会使您处于所需的绑定状态。此外，由于您的数据是一个平面数组，没有其他属性可供分组，因此您需要创建如上所述的伪组来正确生成。更干净的解决方案是将js进入一个过滤器，如：加上一个用于你的答案，但我希望我能以某种方式使其工作，是的，我认为这在ViewThank和good luck中是不可能的。我认为创建一个区块过滤器（如链接所示）不管你想用什么JavaScript逻辑，这都是我见过的最好的方法。另外，这是一段方便的代码，可以防止其他开发人员重复相同的逻辑。
$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);

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

<!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>

<!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>