How to Insert <ul></ul> After Every Other <li> Element Using Angular's ngRepeat

Question

How to Insert <ul></ul> After Every Other <li> Element Using Angular's ngRepeat

With my current setup, I have a list item (li) within a list (ul) and applied ngRepeart. However, I would like to create a new ul after every 2nd li. Is this possible with AngularJS?

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

This is the code for my AngularJS:

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

javascript angularjs

Answer 1

Answer №1

Working with AngularJS involves a concept similar to "Data Driven Development". Aligning your data with the desired HTML structure may pose challenges, but it's certainly not insurmountable. One approach is to modify the structure of your data. If that's not feasible, consider exploring other options.

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>

Another Approach

If altering the data structure is not an option, you can implement a helper function or 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) {  
            prev.push([next]);
        } else {
            prev[prev.length - 1].push(next);  
        }
        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>

The purpose of the filter is to segment the array into subarrays, each containing 2 elements (adjustable based on your needs).

Answer 2

Working with AngularJS involves a concept similar to "Data Driven Development". Aligning your data with the desired HTML structure may pose challenges, but it's certainly not insurmountable. One approach is to modify the structure of your data. If that's not feasible, consider exploring other options.

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>

Another Approach

If altering the data structure is not an option, you can implement a helper function or 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) {  
            prev.push([next]);
        } else {
            prev[prev.length - 1].push(next);  
        }
        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>

The purpose of the filter is to segment the array into subarrays, each containing 2 elements (adjustable based on your needs).

Answer 3

Answer №2

It's advisable to reorganize your data as suggested by others, however, if you really insist, you could implement a solution like the one below:

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

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

</ul>

With the ng-if directive, only every other item in your list will be displayed.

Answer 4

It's advisable to reorganize your data as suggested by others, however, if you really insist, you could implement a solution like the one below:

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

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

</ul>

With the ng-if directive, only every other item in your list will be displayed.

Answer 5

Answer №3

While I do agree with Miszy, there is another way to accomplish this task using the code snippet below:

<section ng-repeat="element in myList">
                <ul ng-if="$index%3 == 0">
                    <li ng-repeat="item in myList.slice($index, $index+3)">
                        {{ item.name }}
                    </li>
                </ul>
            </section>

Answer 6

While I do agree with Miszy, there is another way to accomplish this task using the code snippet below:

<section ng-repeat="element in myList">
                <ul ng-if="$index%3 == 0">
                    <li ng-repeat="item in myList.slice($index, $index+3)">
                        {{ item.name }}
                    </li>
                </ul>
            </section>

Answer 7

Answer №4

You have the option to divide your array into sections. Check out the demonstration provided below:

var application = angular.module('application', []);

application.controller('mainCtrl', function($scope) {


  $scope.listOfNames = [{
    name: 'Smith'
  }, {
    name: 'Aryan'
  }, {
    name: 'John'
  }, {
    name: 'Mark'
  }, {
    name: 'Cooper'
  }, {
    name: 'Lee'
  }]

  Array.prototype.chunk = function(size) {
    var arr = this;
    return [].concat.apply([],
      arr.map(function(element, index) {
        return index % size ? [] : [arr.slice(index, index + size)];
      })
    );
  }

  $scope.arrayTemp = $scope.listOfNames.chunk(2)


});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="application">
  <div ng-controller="mainCtrl">

    <ul ng-repeat="group in arrayTemp">
      <li ng-repeat="individual in group">{{individual.name}}</li>
    </ul>
  </div>
</div>

Answer 8

You have the option to divide your array into sections. Check out the demonstration provided below:

var application = angular.module('application', []);

application.controller('mainCtrl', function($scope) {


  $scope.listOfNames = [{
    name: 'Smith'
  }, {
    name: 'Aryan'
  }, {
    name: 'John'
  }, {
    name: 'Mark'
  }, {
    name: 'Cooper'
  }, {
    name: 'Lee'
  }]

  Array.prototype.chunk = function(size) {
    var arr = this;
    return [].concat.apply([],
      arr.map(function(element, index) {
        return index % size ? [] : [arr.slice(index, index + size)];
      })
    );
  }

  $scope.arrayTemp = $scope.listOfNames.chunk(2)


});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="application">
  <div ng-controller="mainCtrl">

    <ul ng-repeat="group in arrayTemp">
      <li ng-repeat="individual in group">{{individual.name}}</li>
    </ul>
  </div>
</div>

Answer 9

Answer №5

Here's a way you can store your list:

function myController($scope){
  $scope.peopleList= [{
      first:'Alice',
      last: 'Smith'
    },{
      first:'Bob',
      last: 'Johnson'
    },{
      first:'Charlie',
      last: 'Brown'
    }]
}

You can then use ng-repeat to display the list easily:

<div ng-repeat-start="person in peopleList">
  <ul>
    <li>{{ person.first }}</li>
    <li>{{ person.last }}</li>
  </ul>
</div>

Answer 10

Here's a way you can store your list:

function myController($scope){
  $scope.peopleList= [{
      first:'Alice',
      last: 'Smith'
    },{
      first:'Bob',
      last: 'Johnson'
    },{
      first:'Charlie',
      last: 'Brown'
    }]
}

You can then use ng-repeat to display the list easily:

<div ng-repeat-start="person in peopleList">
  <ul>
    <li>{{ person.first }}</li>
    <li>{{ person.last }}</li>
  </ul>
</div>

Answer 11

Answer №6

If you want to change the input list format, there are various possibilities provided by others that you can explore. I recommend taking a look at the general approach shared in this jsfiddle link.

I have created a function that transforms your input list into the specified 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;
};

You can loop through it like this:

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

Answer 12

If you want to change the input list format, there are various possibilities provided by others that you can explore. I recommend taking a look at the general approach shared in this jsfiddle link.

I have created a function that transforms your input list into the specified 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;
};

You can loop through it like this:

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

How to Insert <ul></ul> After Every Other <li> Element Using Angular's ngRepeat

Answer №1

Another Approach

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

What steps can I take to improve this code and prevent the error "Property 'patient' does not exist on type 'Request<ParamsDictionary>'" from occurring?

Behat automates the process of populating form fields that are dynamically displayed as 'visible'

The getStaticProps function will generate an object by fetching data from various URLs

When attempting to use focusin/focusout, I encountered the following error: Uncaught TypeError - The property 'addEventListener' cannot be read from null

Generating a new root in React 18 results in numerous rounds of rendering and execution

Error: Cannot access 'addEventListener' property of null in Chrome Extension due to TypeError

Update the value after verifying the element

How do I go about configuring the uploaded image?

What is the functionality of ng-repeat in AngularJS when used outside the "jump" table?

Tips for retrieving document body from a script embedded within document.write

Is it possible to incorporate an editable text feature within react-moveable? (Allowing for both dragging and editing capabilities)

Retrieve targeted HTML content using AJAX from a webpage that is already being fetched via AJAX

Customize the size of innerWidth and innerHeight in your THREEjs project

What is preventing the value from changing in auth.guard?

What is the best way to manage variables that are not present in a Vue.js template?

Updating the ID's of nested elements in JavaScript when duplicating an element

Attributes for 'v-bind' directives must have a value specified

Exploring the synergies of Next.js and Node.js thread pooling

Guide to creating a functional Async API

Is the performance impacted by using try / catch instead of the `.catch` observable operator when handling XHR requests?