Identify the cell with the maximum value in ng-repeat using AngularJS version 1.4.14

Currently, I am in the process of creating a dashboard and could use some assistance.

After receiving a JSON from an API, I extract an array with 5 elements, each structured as follows (although simplified).

{
      "app_id": "id",
      "app_name": "name",
      "users_percentiles": {
        "users_percentile_1": "3408",
        "users_percentile_2": "2356",
        "users_percentile_3": "988",
        "users_percentile_4": "1099",
      }
    }

Subsequently, I utilize a table to organize these elements within my dashboard.

    <tbody ng-repeat="dash in dashboard">
            <tr>
                <td>{{dash.app_id}}</td>
                <td>{{dash.app_name}}</td>
                <td ng-repeat="percentile in dash.users_percentiles">
                    {{(percentile}}%
                </td>
           </tr>
    </tbody>

I am aiming to highlight the highest percentile value for each ng-repeat loop (highlight both if two are equal).

I believe I need to incorporate something like:

ng-class="{max : percentile == maxPercentile}"

and then implement a function:

     $scope.maxPercentile = -1;
     angular.forEach(percentiles, function (percentile) {
         if (percentile > $scope.maxPercentile) {
             $scope.maxPercentile = percentile;
         }
     });

However, I am uncertain about when and where to integrate this method.

I attempted using a $watch but encountered difficulties in getting it to function correctly...

Answer №1

<div ng-repeat="item in items">
            <ul>
                <li>{{item.id}}</li>
                <li ng-init = "maxvalue = getMaxValue(item.values)">{{item.name}}</li>

                <li ng-class="{highest : value === maxvalue}"
                  ng-repeat="value in item.values">
                    {{value}}
                </li>

           </ul>
    </div>



$scope.getMaxValue = function(values){
         var maxValue = -1;
         angular.forEach(values, function (value) {
             if (value > $scope.maxValue) {
                 maxValue = value;
             }
         });
         return maxValue;
    }

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

What causes nodejs to exit prematurely without running all the code?

When running the code provided, it randomly prints "DONE" or not. Can you explain why this happens? How can I ensure that it always reaches the console.log("DONE"); line every time? const {Worker, isMainThread, parentPort} = require('node:worker_threa ...

Exploring the world of jQuery AJAX alongside Google's currency calculator

I'm currently working on a code that utilizes an AJAX call to access the Google currency calculator. The expected outcome is to receive a JSON array that can then be used to gather exchange rate data. Here is the link: http://www.google.com/ig/cal ...

Issue: Experiencing multiple re-renders when attempting to send a post request to the backend using

export default function CRouter() { const [token, setToken] = useLocalStorage('auth', '') const [user, setUser] = useState(false); const GetUser = () => { if (token !== "" && !user) { axios.post(&apo ...

Why would you need multiple root handlers?

One interesting feature to note is that multiple callback functions can be used as middleware to handle a request. These callbacks can take on different forms - they could be in the form of a single function, an array of functions, or even a combination of ...

Refreshing the AngularJS application by re-rendering the view without the need for a full reload

I am currently working on an application that heavily utilizes the ng-include directive, and one thing I cannot stand is having to reload the entire application just to see a simple HTML update. I have experimented with manually replaying the XHR in the N ...

Utilizing JQuery to alter the text color if validation fails when entering a value

Is there a way to change the text in the input box to red when PHP validation fails using JQuery? I had success with Javascript, but it kept disappearing every time I clicked submit... <form class="link-form" method="post" action=""> <la ...

Creating a dynamic menu in antdesign requires a few simple steps to customize the

I am looking to implement a dynamic menu using antdesign version 4.19.5 Below is the code for a static menu: <Menu selectable selectedKeys={activeKey}> { <Menu.SubMenu title="Main Title 1" > <Menu.Item key={&a ...

Manipulating SVG elements through Angular directives allows for precise control over the appearance and

I'm currently facing a challenge while attempting to manipulate elements within an SVG using an Angular 1.x directive. Quick note: I am trying to showcase static values on the bars created by Chartist through Angular. Below is the HTML structure (ap ...

What is the best way to retrieve attributes and values from JSON using JavaScript?

I'm working with a javascript function called create(tagName, options), where the options variable is in JSON format. Here's an example structure: {id: 'test_id', class: 'test_class'} My question is about how to extract the ...

Adjusting the height of table rows in Angular within a Razor cshtml file

Is there a way to set the height of a table row and ensure it respects the defined height without taking different heights? I tried using styles with white-space: pre-wrap, overflow: hidden, and text-overflow: ellipsis, but it's not working as expecte ...

Angular2 faces a challenge with the selection issue

I have created a Plunker code for you to review. If you click the "toggle show" button twice, the selected item should be displayed. import {Component} from '@angular/core'; @Component({ selector: 'my-app', template: `<div *ngI ...

Discover the invisible element using Selenium WebDriver in JavaScript by clicking on it

<tr id="mytr"> <td id="Table" onmouseover="this.className='menulevel1hl';" onmouseout="this.className='menulevel1norm'" class="menulevel1norm" onclick="PopupWin('Left',divMenu2011,this,'.menuitempopuprownormal ...

Change the value of a particular property in an array of objects by utilizing an inline function

I am working on updating the price field for a specific object. Below is my selectedCurrenciesArray: const [selectedSwapCurrencies, setSelectedSwapCurrencies] = useState([ { symbol: null, logo: null, price: 0 }, { ...

The process of showcasing a CanvasJS chart through the VS Code Extension

I'm currently in the process of creating a VS Code extension to showcase some graphs I've created using CanvasJS. However, I've hit a roadblock: I can't figure out how to run the HTML file without relying on "go Live" or a similar tool. ...

Closing the React Material UI drawer with nested list items upon clickingORClicking on nested list

Currently, I am encountering an issue with my React project that utilizes Material-UI. The problem arises when I incorporate nested list items within the drawer component. Previously, everything was functioning smoothly until the addition of these nested i ...

Limiting the number of columns displayed in a row with Angular's ng-repeat

I need assistance with my web application's friends list page. Currently, I am unable to limit the number of friends displayed in each row to 3. Here is the code snippet causing the issue: <div class="row" style="padding-left:200px;"> ...

Tips for fixing issues such as - npm ERR! Cannot interpret attribute 'solve' of unknown

After successfully downloading nodeJs v12.18.4, I encountered an issue when trying to download npm version 5.5.1 through a command. The error message that appeared was: npm ERR! Cannot read property 'resolve' of undefined npm ERR! A complete log ...

The ngMessage feature in Angular bootstrap ui tabs seems to be malfunctioning specifically within the initial tab

Encountered a peculiar issue with ngMessage While using angular ui bootstrap tabs, the validation is not functioning correctly in the first tab This is the code snippet js angular .module('app', ['ngMessages','ui.boots ...

Utilizing bootstrap for a responsive design that includes max-height constraints and horizontal

Seeking to modify the appearance of my Angular Template by incorporating Bootstrap and a custom CSS file. <!-- index.html --> <div static-include="partial/example.html"></div> The static-include directive, sourced from Stack Overflow, p ...

generate a series of nested divs within one another

I am looking to create a custom nested loop that will generate div elements based on the content of my h1 and h2/h3 tags. I understand this may have been covered in other inquiries, so any guidance would be appreciated :) Here is the initial HTML: <h1& ...