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

Question

I have a ul and I apply ngRepeart on li but I want after every 2nd li it's create new ul Like This.
is this possible ?

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

and this is my angular.js code

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

Answer 1

Programming in AngularJS is close to " Data Driven Development ". Your data doesn't reflect the structure of HTML you want to get so it's harder to achieve, but not impossible. My first suggested solution is to change your data's structure. If that's not an option, keep on reading.

 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> 

Alternative

In case you can't change the data structure, you can still do this. Implement a little helper function or a filter:

 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> 

What the filter does is: take the array and divide it into many arrays, each with 2 elements (this is a parameter so you can reuse that later).

Answer 2

Better to rearrange your data like the others have said, although if you really wanted you could do something like this:

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

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

</ul>

The ng-if will stop rendering every second item in your list.

Answer 3

Although I agree with Miszy, you may be able to achieve it with the following snippet:

<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

well, you can hold the list like so:

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

and then you can do ng-repeat easily

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

Answer 5

You can split your array into chunks. Please see demo below

 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

You can modify the input list and change the format as described by others. I would suggest you to check the generic approach proposed in jsfiddle .

I wrote a function that will convert your input list to the required format:

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

and iterate it like this:

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