What is the method to display a group label using ng-table?

Does anyone have experience creating a group in ng-table?

<div>
    <div ng-controller="ContractsController" style="position: relative;background:whitesmoke; border:1px solid lightgray; border-radius:5px; margin-top:0px; margin-bottom:5px; height:330px;">
        <button prevent-default ng-click="tableParams.sorting({});tableParams.filter({});" class="btn btn-deufol btn-sm pull-right" style="width:150px;margin: 2px;"><span class="glyphicon glyphicon-th"></span> Show All</button>

        <div style="margin-top: 6px;">
            Group by:
            <select ng-model="groupby" style=" font-weight:bold;"> 
                <option value="vPPickUp" label="Picked Up">Picked Up</option>
                <option value="vsHier1" label="Order Number">Order Number</option>
                <option value="lastModifiedDate" label="Edited On">Edited On</option>
                <option value="orderNo" label="Order Number">Order Number</option>
                <option value="locationName" label="Location">Location</option>                
                <option value="stateId" label="Status Box">Status Box</option>
                <option value="vPReadyForDispatch" label="Ready for Dispatch">Ready for Dispatch</option>
                <option value="vPADate" label="VPA Creation Date">VPA Creation Date</option>
            </select>
        </div>

        <div id=container" class="scrollable-area table-responsive" style="position:relative;background:whitesmoke; margin-top:0px; margin-bottom:0px; height: 294px;">
            
            <%-- Should actually display an animation... --%>
            <div class="alert alert-info" ng-show="loading" style="text-align:center;">Loading Data ...</div>
            
            <table class="table" ng-table="tableParams" show-filter="true" fixed-table-headers>
                <tbody ng-repeat="group in $groups">
                    <tr class="ng-table-group">
                        <td colspan="{{$columns.length}}">
                            <a href="" ng-click="group.$hideRows = !group.$hideRows" style="color:#3D3D3D;">
                                <span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': group.$hideRows, 'glyphicon-chevron-down': !group.$hideRows }"></span>
                                <strong>{{ group.label }} {{ group.value }}</strong>
                            </a>
                        </td>
                    </tr>
                        <tr ng-hide="group.$hideRows" ng-repeat="data in group.data"
                            ng-click="loadSingleView(data.vsHier1, data.vsHier2, data.kolliNoIntern); setSelected(data.id)" ng-class="{{selected}}">
        </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

In this method, AngularJS only displays the group by value. Is there a way to also show the group itself?

For example: If I group by a date, Angular shows the group as "01.12.2014", "02.12.2014" ....

What I want: "VPA Creation Date: 01.12.2014"

If you have any tips or solutions, please share them.

javascriptangularjs

Answer №1

To access the data within a group object, simply refer to the specific information stored in each element of the group array. This assumes that the field you are searching for is consistent across all items in the group.

Since every group must contain at least one item, you can extract the desired information from the initial item in the group. For instance, if I am organizing my "Domain" objects based on the "name" field, Ngtable initially displayed {{group.value}} but I customized it to show:

Description of Domain {{group.data[0].description}}: {{group.value}}

Answer №2

Is this the solution you were looking for?

group demonstration


$scope.tableParams = new ngTableParams({
    page: 1,            // start on first page
    count: 10          // number of items per page
}, {
    groupBy: 'role',
    total: data.length,
    getData: function($defer, params) {
        var orderedData = params.sorting() ?
                $filter('orderBy')(data, $scope.tableParams.orderBy()) :
                data;

        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
    }
});

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 Bootstrap checkbox/switch

Trying to determine the status of a checkbox - whether it's checked or not. The default state is unchecked, but I need to perform actions when it is checked and also when it gets unchecked. Currently using bootstrap 5.3.0 alpha html <div clas ...

javascripthtmlbootstrap-5

Seeking assistance in comprehending the method for styling table data using inline CSS in a JavaScript file

I am currently using a JavaScript file that was created for me to update form data based on user selections and display radio buttons along with the corresponding costs. Although the inline CSS in this script works perfectly fine in Chrome and Firefox, it ...

javascripthtmlcss

Create an object using a combination of different promises

Creating an object from multiple promise results can be done in a few different ways. One common method is using Promise.all like so: const allPromises = await Promise.all(asyncResult1, asyncResult2); allPromises.then([result1, result2] => { return { ...

javascripttypescript

Angular: Error when TypeScript object returns an array object value

I have encountered a strange issue where the array value returned as [object Set] when I console log it. It's unclear whether this problem is occurring in the component or the service, but the object values are not being displayed. This issue arises ...

javascriptarraysangulartypescriptangular7

Saving the current date in MongoDB using the save method

Is there a way to have MongoDB automatically populate a field with the current UTC DateTime when saving a document? I'm aware of the $currentDate operator, but it seems to only be accessible within the update method. ...

javascriptmongodbdate

Managing a large number of records in a for loop on a Node.js server can be challenging, especially when dealing with nearly

After setting up a NodeJS server and connecting it to a MySQL database with around 5000 users, I needed to read the data from MySQL and update a MongoDB database. I managed to write code for this process. https://gist.github.com/chanakaDe/aa9d6a511070c3c78 ...

javascriptmysqlnode.jsmongodb

VUE- the GetElementByClassName function is malfunctioning

I attempted to utilize 'getelementbyclassname' within VUE methods. My reason for doing so is that instead of applying information using :style, I would like to adjust the width of the div where I applied my class named 'classon'. I ...

javascriptvue.jsdata-visualization

A step-by-step guide to moving Vue .prototype to its own file

I have a couple of functions that I need to add to Vue's .prototype. However, I don't want to clutter up the main.js file. I attempted to move the prototypes like this: //main.js import "./vue-extensions/prototypes"; ...

javascriptvue.js

Troubleshooting: Dealing with Access-Control-Allow-Origin Issue

While debugging a web app in Visual Studio 2013 Express for Web, I encountered the following error. This particular app is built with MVC using angularjs, jquery, and bootstrap. Interestingly, my other web apps are functioning without any issues and do not ...

jqueryasp.netangularjs

Is it possible to use the AngularJS function with the <div> HTML element?

I am facing an issue with displaying a modal when clicking on a <div> element. The function assigned to show the modal by changing the CSS property 'display' from 'none' to 'block' works fine when attached to a button, b ...

javascripthtmlangularjs

What makes factories the preferred choice for sharing data between controllers in AngularJS?

As a newcomer to Angular, I've been exploring ways to share data between two controllers. After some research on Google, it seems that the most common method is using a factory. However, I'm curious if it can be achieved using a service instead o ...

angularjs

The RemoveEventListener function seems to be malfunctioning within Angular2 when implemented with TypeScript

I am currently incorporating three.js into Angular2. The code I am using is quite straightforward, as shown below. this.webGLRenderer.domElement.addEventListener('mousedown', ()=>this.onMouseDown(<MouseEvent>event), false); this.webGLR ...

javascriptangulartypescript

Problems arise when JQuery fails to function properly alongside ajax page loading

While utilizing ajax to load the page, I encountered an issue where the jQuery on the loaded page template was not functioning until the page was manually refreshed. The ready function being used is: jQuery(document).ready(function() { jQuery(' ...

javascriptjqueryajaxdocument-ready

Can we iterate through an array containing arrays of objects in a loop?

Here is an example of how I want my solution to appear: https://i.sstatic.net/B9AW1.png Currently, I have created an array where I group items by their first letter, like this: const grouped = _.groupBy(topicPages, key => key.relatedTopic.title[0]); ...

javascriptreactjs

What is the best way to ensure the search box remains fixed in the top navigation bar while maintaining a fluid and responsive design?

I've been struggling as a novice programmer, and even with the help of more experienced programmers, we haven't been able to figure it out. I'm trying to integrate a search box into the top navigation that adjusts responsively to different ...

javascriptjqueryhtmlcsswordpress

Transferring a value between controller and directive in AngularJS

Is it possible to send a value from the controller to the directive, even if the directive in the view can be overridden? For example, in the controller: var controllers = angular.module('Project.Controllers.ActionBarCtrl', []); control ...

angularjsangularjs-directive

The success function in Ajax is constantly elusive, while the error function prevails. The data just can't seem to make it to the destination file

Thank you for your patience. This marks my initial post to the best of my recollection. The section below showcases a snippet from my calendar.js script. My current objective involves sending data obtained from a modal window in index.php over to sql.php. ...

javascriptphpjqueryajaxpost

Incorporating a jQuery word count and limit within PHP code: a step-by-step guide

I am encountering an issue with a textarea count code. It functions perfectly on its own but when I integrate it as shown below, it stops working without throwing any errors. I have been trying to resolve this for more than 3 days now. Any assistance would ...

javascriptphpjqueryhtml

Blunder! Error code EINVALIDTAGNAME encountered while trying to install a package

I'm encountering an issue while trying to add a new package to my React application. The error I'm receiving is: $ npm install xlsx npm ERR! code EINVALIDTAGNAME npm ERR! Invalid tag name "react-scripts start": Tags may not have any characters th ...

javascriptreactjsnpmnpm-install

I'm facing issues with Webpack not being able to resolve and locate the node

Encountering difficulties while setting up and running the Three.js library as a module based on the guidelines provided in the manual at Here is a summary of the steps taken: Created package.json npm init Installed webpack npm i --save-dev webpack we ...

javascriptnode.jswebpackthree.jswebpack-dev-server