在每第二个<li>之后使用角度ngRepeat添加<ul> </ ul>

Question

我有一个ul并且我在li上应用了ngRepeart但是我希望在每个第二个li之后创建新的ul Like This。
这可能吗 ？

<ul>
  <li>simth</li>
  <li>aryan</li>
</ul>
<ul>
  <li>john</li>
  <li>mark</li>
</ul>
<ul>
  <li>cooper</li>
  <li>lee</li>
</ul>

这是我的angular.js代码

function myCrtl($scope){
  $scope.nameList= [{
      name:'simth'
    },{
      name:'aryan'
    },{
      name:'john'
    },{
      name:'mark'
    },{
      name:'cooper'
    },{
      name:'lee'
    }]
}

Answer 1

AngularJS中的编程接近于“ 数据驱动开发 ”。 您的数据不会反映您想要获得的HTML结构，因此更难实现，但并非不可能。 我的第一个建议的解决方案是更改数据的结构。 如果这不是一个选项，继续阅读。

 const myApp = angular.module('myApp',[]); myApp.controller('MyCtrl', $scope => { $scope.nameList = [ [{name: 'simth'}, {name: 'aryan'}], [{name: 'john'}, {name: 'mark'}], [{name: 'cooper'}, {name: 'lee'}] ]; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script> <div ng-app="myApp"> <div ng-controller="MyCtrl"> <ul ng-repeat="group in nameList"> <li ng-repeat="person in group">{{person.name}}</li> </ul> </div> </div> 

替代

如果您无法更改数据结构，您仍然可以执行此操作。 实现一个小帮助函数或过滤器：

 const myApp = angular.module('myApp',[]); myApp.controller('MyCtrl', $scope => { $scope.nameList = [ {name: 'simth'}, {name: 'aryan'}, {name: 'john'}, {name: 'mark'}, {name: 'cooper'}, {name: 'lee'} ]; }); myApp.filter('getGroup', () => (array, number) => { return array.reduce((prev, next, index) => { if (index % number === 0) { // start a new group prev.push([next]); } else { prev[prev.length - 1].push(next); // add to existing group } return prev; }, []); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script> <div ng-app="myApp"> <div ng-controller="MyCtrl"> <ul ng-repeat="group in nameList | getGroup:2"> <li ng-repeat="person in group">{{person.name}}</li> </ul> </div> </div> 

过滤器的作用是：取出数组并将其分成许多数组，每个数组包含2个元素（这是一个参数，以便您以后可以重复使用）。

Answer 2

最好像其他人所说的重新排列你的数据，尽管如果你真的想要你可以这样做：

<ul ng-if="$even" ng-repeat="person in nameList">

    <li>{{ person.name }}</li>
    <li>{{ nameList[$index + 1].name }}</li>

</ul>

ng-if将停止呈现列表中的每个第二项。

Answer 3

虽然我同意Miszy，但您可以使用以下代码段来实现它：

<div ng-repeat="item in nameList">
                <ul ng-if="$index%2 == 0">
                    <li ng-repeat="item in nameList.slice($index, $index+2)">
                        {{ item.name }}
                    </li>
                </ul>
            </div>

Answer 4

好吧，你可以这样保存列表：

function myCrtl($scope){
  $scope.nameList= [{
      name1:'simth'
      name2:'aryan'
    },{
      name1:'john'
      name2:'mark'
    },{
      name1:'cooper'
      name2:'lee'
    }]
}

然后你可以轻松地进行重复

<div ng-repeat-start="item in nameList">
  <ul>
    <li>item.name1</li>
    <li>item.name2</li>
  </ul>
</div>

Answer 5

您可以将阵列拆分为块。 请参阅下面的演示

 var app = angular.module('app', []); app.controller('homeCtrl', function($scope) { $scope.nameList = [{ name: 'simth' }, { name: 'aryan' }, { name: 'john' }, { name: 'mark' }, { name: 'cooper' }, { name: 'lee' }] Array.prototype.chunk = function(chunkSize) { var array = this; return [].concat.apply([], array.map(function(elem, i) { return i % chunkSize ? [] : [array.slice(i, i + chunkSize)]; }) ); } $scope.temparray = $scope.nameList.chunk(2) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app"> <div ng-controller="homeCtrl"> <ul ng-repeat="gr in temparray"> <li ng-repeat="person in gr">{{person.name}}</li> </ul> </div> </div> 

Answer 6

您可以修改输入列表并按其他人的描述更改格式。 我建议你检查jsfiddle中提出的通用方法。

我写了一个函数，将您的输入列表转换为所需的格式：

$scope.getSegment = function(noOfRecord){
    noOfRecord = noOfRecord;
    var processedList = [];
    var tempList = [];
    for(var i = 0; i <  $scope.nameList.length; i++){
        tempList.push($scope.nameList[i]);
        if((i+1)%noOfRecord == 0){
            processedList.push(tempList);
            tempList = [];
        }
    }
    return processedList;
};

并迭代它像这样：

<ul ng-repeat="group in getSegment(2)">
    <li ng-repeat="detail in group">{{detail.name}}</li>
</ul>