Ways to enhance multiple ng-repeats efficiently with css grid

Looking to create a CSS grid table with 5 columns and an undetermined number of rows. The goal is to display a pop-up element when an element in the first column is clicked, covering columns 2 through 5. This ensures that only the first column remains visible while maintaining scroll position across all columns.

The issue arises when dealing with larger datasets as the performance slows down due to multiple ng-repeats. Is there a way to consolidate these ng-repeats without sacrificing the separation of columns?

Attempting to use ng-repeat-start/end requires encapsulating data elements under a parent element, which results in auto-generated rows and cells. This restricts control over individual columns, such as setting scrollability or specific heights for the first column.

<h1>Call List</h1>
<select>
    <option ng-repeat="list in vm.list">{{list.name}}</option>
</select>
<div class="call-list-grid" ng-init="vm.selected=false;">
    <div ng-click="vm.selected = !vm.selected" id="consumers" ng-repeat-start="list in vm.listdata">
        {{list.name}}</div>
    <div ng-if="!vm.selected" ng-click="vm.selected = vm.selected" id="status">{{list.status}}</div>
    <div ng-if="!vm.selected" ng-click="vm.selected = vm.selected" id="timezone">{{list.timezone}}</div>
    <div ng-if="!vm.selected" ng-click="vm.selected = vm.selected" id="time">{{list.time}}</div>
    <div ng-if="!vm.selected" ng-click="vm.selected = vm.selected" id="guide" ng-repeat-end>{{list.guide}}</div>

    <div ng-if="vm.selected" id="selected-consumer"></div>
</div>

This snippet showcases the current code in an optimization phase.

<div class="container">
    <h1>Title header</h1>
    <select>
        <option ng-repeat="data in vm.data">{{list.name}}</option>
    </select>
    <div class="list-grid" id="grid" ng-class="{'selected' : vm.selected}"
         ng-init="vm.selected=false;">
        <div id="user" ng-class="{'user-selected' : vm.selected}">
            <div ng-click="vm.selectUser()" ng-repeat="list in vm.listdata">
               {{list.name}}
            </div>
        </div>
        <div id="status">
            <div ng-if="!vm.selected" ng-class="{'user-selected' : vm.selected}"
                 ng-repeat="list in vm.listdata">
                {{list.status}}</div>
        </div>
        <div id="timezone">
            <div ng-if="!vm.selected" ng-class="{'user-selected' : vm.selected}"
                 ng-repeat="list in vm.listdata">
                {{list.timezone}}</div>
        </div>
        <div id="time">
            <div ng-if="!vm.selected" ng-class="{'user-selected' : vm.selected}"
                 ng-repeat="list in vm.listdata">
                {{list.time}}
            </div>
        </div>
        <div id="person">
            <div ng-if="!vm.selected" ng-class="{'user-selected' : vm.selected}"
                 ng-repeat="list in vm.listdata">
                {{list.person}}
            </div>
        </div>
        <div ng-if="vm.selected" id="selected">

        </div>
    </div>
</div>
.list-grid {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    row-gap: 2px;
    height: 77vh;
    overflow-x: hidden;

    &.consumer-selected {
        overflow: hidden;
    }
}

#user {
    grid-column-start: 1;
    grid-column-end: 2;

    // height: 100vh;
    // overflow: hidden;
    &.consumer-selected {
        overflow-y: auto;
        overflow-x: hidden;
        height: 77vh;
    }
}

#status {
    grid-column-start: 2;
    grid-column-end: 3;

    &.consumer-selected {
        display: none;
    }
}

#timzone {
    grid-column-start: 3;
    grid-column-end: 4;

    &.consumer-selected {
        display: none;
    }
}

#time {
    grid-column-start: 4;
    grid-column-end: 5;

    &.consumer-selected {
        display: none;
    }
}

#person{
    grid-column-start: 5;
    grid-column-end: 6;

    &.consumer-selected {
        display: none;
    }
}

#selected{
    background-color: rgb(177, 218, 177);
    grid-column-start: 2;
    grid-column-end: 6;
    grid-row: 1 / 50;
    height: 77vh;
}

Answer №1

Hey there! Have you ever tried using the filter limitTo? It may not be the perfect solution, but it could definitely be useful for your needs. You can implement it like this:

<div class="container">
     <h1>Title header</h1>
      <select>
        <option ng-repeat="data in vm.data">{{list.name}}</option>
     </select>
    <div class="list-grid" id="grid" ng-class="{'selected' : vm.selected}" ng- 
          init="vm.selected=false;">
        <div id="user" ng-class="{'user-selected' : vm.selected}">
            <div ng-click="vm.selectUser()" ng-repeat="list in vm.listdata  | limitTo:quantity"> 
          {{list.name}}</div>
        </div>

        <!-- Other div elements here -->

        <button ng-click="getMore()">More</button>
       </div>
    </div>


//your controller 

  $scope.getMore = function(){
    $scope.quantity += 10 //or 20, 30
 }

You can even try implementing scrolling functionality with this setup.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with triggering function within Material UI Tabs

The issue I encountered cannot be replicated, but I attempted to address it. Within a Material UI element, there is a child element that I inserted - an X icon located in the corner. The parent element is the surrounding box. There are two main problems: ...

Creating JSON from identical user interface components

I have created a form similar to this one: https://jsfiddle.net/6vocc2yn/ that generates a JSON output like below: { "List": [ { "Id": 10, "Name": "SDB_SOLOCHALLENGE_CHALLENGE_DESC_10", "email": "<a href="/cdn-cgi/l/email-pr ...

What is the best way to attach a CSS class using an onclick function?

I need to dynamically apply a CSS class to a specific div when clicked using JavaScript. Here is the HTML structure: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv=&qu ...

Utilize Restangular to send data as a payload rather than a query string

Currently, my backend service is set up to register a new user in our system using the following URL: /api/users/register When using Restangular, post requests are typically sent as either query string: Restangular.all('users').post("register" ...

React code displaying misalignment between label and input

Can you help me align my URL and https:// on the same margin? https://i.sstatic.net/hxkkC.png <div className="card"> <div className="card-body"> <div className="form-group col-12"> <label cla ...

Utilizing AngularJS to selectively filter objects based on specific fields using the OR operator

My collection includes various items with different attributes. For instance, here is the information for one item: {"id":7,"name":"ItemName","status":"Active","statusFrom":"2016-01-04T00:00:00","development":"Started","devStartedFrom":"2016-01-04T00:00:0 ...

Is it necessary to test the $routeProvider when() configuration to ensure the stability of the application during runtime?

$routeProvider.when('/login', { templateUrl: 'app/login.html', controller: 'LoginController as vm' }); After switching vm to another variable like avm, the code passes unit tests successfully but results in a broken v ...

Angular UI-Select's issue with duplicating tags while adding objects for tagging functionality

I have implemented the ui-select library to enable the "Tagging" feature in my project. Currently, I am utilizing an Array of objects where each object contains an id and a name. The functionality is working as expected. However, when a user types in a n ...

Generate HTML content using AngularJS

Is there a way to format a string as HTML when using it in the following syntax: <div> {{ text }} </div> Instead of displaying the actual HTML, only the text is shown - for example " ab " ...

Is Ursina the right choice for web development?

Looking for a method to compile Ursina for HTML5 using WebAssembly or another technology? I am seeking to make my Ursina Game compatible with Linux & Mac (and potentially Android/iOS with webview), but the current cross-platform compilation options for Py ...

The form yields no response and fails to send any data

Ensuring that the form on this site successfully sends the name and phone number is crucial. However, upon clicking the send button, I encounter an empty modal window instead of a response indicating whether the data was sent or not. The contents of the fi ...

Restore font-weight if a different list item is chosen

I previously inquired about setting the font-weight to bold on a text element when selected. Thanks to @Eric, this has been successfully implemented! However, I am facing an issue where clicking on one text makes it bold, and then clicking on another text ...

Limiting the height of a grid item in MaterialUI to be no taller than another grid item

How can I create a grid with 4 items where the fourth item is taller than the others, determining the overall height of the grid? Is it possible to limit the height of the fourth item (h4) to match the height of the first item (h1) so that h4 = Grid height ...

Data cannot be cleared in the service

I have set up a customer shopping cart on the client side of my application, with a controller managing the functions of the cart and a service injected into that controller. Upon loading the page, I retrieve the contents of the cart from localStorage and ...

Discrepancies in button padding across desktop and mobile platforms

I have created a sample button and included a jsfiddle link to showcase the code. Due to the font properties of the specific font I'm using, I had to adjust the padding values differently for the top and bottom of the text to achieve a vertically cent ...

A div element without a float property set will not automatically adjust its

Can someone help me with this issue? The left-menu div is not the same height as the main content. I've tried using overflow, but it just adds a scroll bar. I've looked at numerous posts on Stack Overflow, but I can't seem to fix this proble ...

Implementing Clockwise Padding with React Material-UI

Can Mui Box utilize shorthand properties for padding in a clockwise syntax? Unfortunately, this method does not work and results in a syntax error. <Box padding = {2 1 1 2}/> ...

One issue that may arise is when attempting to use ngOnDestroy in Angular components while rearranging user transitions

Encountered an issue recently with Angular - when the user navigates from component A to component B, component A remains active unless ngOnDestroy is triggered. However, if the user visits component B before going to component A and then leaves, ngOnDes ...

Steps for smoothly transitioning an element into a row and animating its neighboring elements to adjust their width using VueJS

Is there a way to smoothly slide-in an element in a row and have the other elements adjust their widths accordingly while maintaining their relative sizes? <div style="width: 100%; display: flex"> <div id="firstColumn" ...

Issue with displaying value from page in AngularJS modal when clicked

How can I get the data copied from my page's $scope element (thisRequest) into my modal's $scope element (nTask) to display correctly in the modal after clicking a button in AngularJS? You can view the code on this Plunker. Here is an example o ...