Apply a unique color to the highest value within each column using AngularJS ng-repeat

I just started learning Angularjs, and I'm not sure how to achieve this.

I want to highlight the member with the highest Score, Missed, and Field Goal percentage by adding color. Is there a way to do this? https://i.sstatic.net/9KF5D.png

Is it possible to change the color of the value to green for the member with the largest value in each column?

https://i.sstatic.net/ggBhm.png like this: (desired result)

This is my HTML code:

<body ng-app="myApp" ng-controller="myCtrl">
<table border="2">
    <tr>
        <th>Members</th>
        <th>Score</th>
        <th>Missed</th>
        <th>FG%</th>
    </tr>
    <tr ng-repeat="member in members">
        <td>{{member.name}}</td>
        <td>{{getScore(member.shotMade)}}</td>
        <td>{{getMissed(member.shotMade, member.shotAttemp)}}</td>
        <td>{{getFG(member.shotMade, member.shotAttemp)}}</td>
    </tr>
</table>

This is my javascript code:

const app = angular.module('myApp', []);
app.controller('myCtrl', function($scope){
    $scope.test = "success";
    $scope.members = 
    [
        {name:'Kobe', shotMade:23, shotAttemp:44},
        {name:'lebron', shotMade:21, shotAttemp:33},
        {name:'Jordan', shotMade:32, shotAttemp:43},
        {name:'Hakeem', shotMade:20, shotAttemp:21},
    ]
    $scope.getScore = (made)=> made * 2;
    $scope.getMissed = (made, attemp) => attemp - made;
    $scope.getFG = (made, attemp) => (made / attemp) * 10000;
});

Is there a way to achieve this using AngularJS or JavaScript?

Answer №1

angular.module('myApp', []).controller('myCtrl', function($scope) { 
  $scope.players = [
    { name: 'Steph', shotMade: 25, shotAttemp: 42 },
    { name: 'Kevin', shotMade: 18, shotAttemp: 30 },
    { name: 'Chris', shotMade: 27, shotAttemp: 39 },
    { name: 'Dwyane', shotMade: 19, shotAttemp: 25 }
  ]
  var getPoints = (made) => made * 2;
  var getMissedShots = (made, attemp) => attemp - made;
  var getFieldGoalPercentage = (made, attemp) => (made / attemp) * 10000;
  
  $scope.maxPoints = 0;
  $scope.maxMissedShots = 0;
  $scope.maxFGPercent = 0;
  for (var player of $scope.players) {
    player.points = getPoints(player.shotMade);
    if (player.points > $scope.maxPoints)
      $scope.maxPoints = player.points;

    player.missedShots = getMissedShots(player.shotMade, player.shotAttemp);
    if (player.missedShots > $scope.maxMissedShots)
      $scope.maxMissedShots = player.missedShots;

    player.fgPercent = getFieldGoalPercentage(player.shotMade, player.shotAttemp);
    if (player.fgPercent > $scope.maxFGPercent)
      $scope.maxFGPercent = player.fgPercent;
  }
});
.maxGreen {
  color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js">
</script>

<body ng-app="myApp" ng-controller="myCtrl">
  <table border="2">
    <tr>
      <th>Players</th>
      <th>Points</th>
      <th>Missed Shots</th>
      <th>Field Goal %</th>
    </tr>
    <tr ng-repeat="player in players">
      <td>{{player.name}}</td>
      <td ng-class='{maxGreen: player.points == maxPoints}'>{{player.points}}</td>
      <td ng-class='{maxGreen: player.missedShots == maxMissedShots }'>{{player.missedShots}}</td>
      <td ng-class='{maxGreen: player.fgPercent == maxFGPercent}'>{{player.fgPercent}}</td>
    </tr>
  </table>

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

Issues with tracking changes in Vue.js when using reactive variables

After triggering a click event, I am attempting to choose a message from a json file. However, I am encountering an issue where the first click does not seem to select anything. Upon the second click, the selected messages are duplicated, and this pattern ...

Add a plugin to the website after the DOM has finished loading

Here is a code snippet that utilizes a jQuery plugin to apply scrollbars to a DOM element: <script type="text/javascript"> $(document).ready(function () { $(".pp-meta-content").customScrollbar(); }); </script> This code works ...

Is there a way for me to calculate the square of a number generated by a function?

Just starting out with Javascript and coding, I'm having trouble squaring a number that comes from a function. I've outlined below what I am trying to achieve. Thank you in advance for your help. // CONVERT BINARY TO DECIMAL // (100110)2 > ( ...

The error message "gaq is not defined in opencart 2.0" indicates

While attempting to monitor transactions in OpenCart, I encountered the following error message: Uncaught ReferenceError: _gaq is not defined(anonymous function) This is the method I am using for tracking in my catalog/view/theme/default/template/commo ...

Utilize Protractor to extract the text within a specified span element

Is it possible to check if the text of the span within the button is "Vigente" using expect and Jasmine? If so, how can I achieve this? <button _ngcontent-hke-28="" class="btn btn-success disabled" tabindex="-1"> <span _ngcontent-hke-28="" class= ...

Issue with Vue property's sub-object not inheriting methods from prototype

Incorporating Vue into my project to showcase an intricate hexagonal grid has been quite challenging. Utilizing the Honeycomb library for handling the grid data in memory has proven to be both beneficial and complex. The library introduces a specialized Gr ...

Reset the dropdown menu in React by setting a disabled option as the default selection

One issue I'm facing is trying to reset some dependent dropdowns that are controlled by react state. The functionality works fine, except when the default option is set as disabled. I came across this code snippet in a fiddle from another stackoverfl ...

Issue persists with Angular 2 *ngFor functionality even after successfully importing CommonModule

After creating a feature module using the CLI, I imported the common module as shown below: import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { HomeComponent } from './home/home.compo ...

Utilizing a file from external sources in WebPack 1.x beyond the webpack root directory

In my project structure, I have the following setup: Root Project1 package.json webpack.config Project2 package.json webpack.config Common file1.js I need to use file1.js in each project. The webpack v ...

Tips for creating a static background when displaying a modal popup in AngularJS

Incorporating a modal popup to modify a row within a grid view has been my recent task. Leveraging the row.getProperty() function, I successfully extracted the row values within the modal. However, an inconvenience emerged when attempting to edit a value ...

Display a pop-up window upon clicking anywhere on the webpage using jQuery and HTML

Is it possible for me to create a pop-up window that opens a specific website when a user clicks anywhere on the page, similar to pop-up companies? Can this be achieved using HTML, JavaScript, and jQuery? Any help would be greatly appreciated. ...

Leveraging one controller within another controller with AngularJS

Why is it not possible to bind to a controller's variable inside another controller? <div ng-app="ManagerApp"> <div ng-controller="MainCtrl"> Main: <div ng-repeat="state in states"> {{state}} ...

Tips for automatically filling in user-entered form values in AngularJS in the event of a failed REST API call

I have created an AngularJS form that includes dropdowns and text boxes. Once the user submits the form, I intend to call a REST API to save the entered values. However, I am unsure how to handle the scenario where the insertion fails. How can I repopula ...

Tips on accessing real-time data from a JSON file

I have been working on this project for a while now and wrote some test scripts. I am using setInterval to update the content every 500 seconds, but I am facing an issue with accessing the input fields. For example, if there is a form with input fields, I ...

Managing Time Before Browser Refresh in AngularLearn how to monitor and examine the time remaining before

In my Angular web application, I am facing an issue where the user's login status is lost every time the browser is refreshed or reloaded. I want to implement a feature that allows the login status to remain active for a short period of time after the ...

Can you pass a specific function as a parameter in express.post()?

I have a snippet of code that is functioning correctly. I am wondering if it is possible to pass a pre-defined function as a parameter within express.post(). const exs = require('express'); const exs_r = exs.Router(); router.post('/click&a ...

Creating an array of form input names using JavaScript within the HTML input tag

I have a two part question that I'm hoping someone can help me with. There was a similar question asked recently that included information about this particular type of array in PHP, but unfortunately, I can't seem to locate it at the moment. 1. ...

Discovering the specifics of an appointment within a shift event using FullCalendar

The title of the question may not accurately depict the scenario I am about to discuss. I'm currently working with FullCalendar and utilizing an open source library that allows me to add resources at the top. You can view the outcome of this on Js ...

What are the steps to incorporating an Image in a React Native application?

My Image is not showing up when I try to render it using image uri, and I'm not sure why. Here is the code snippet I'm using in a React Native project. import React from 'react'; import styled from 'styled-components/native'; ...

Using console.log as an event listener

Check out this fiddle for reference: http://jsfiddle.net/calvintennant/jBh3A/ I am interested in utilizing console.log as an event listener: badButton.addEventListener('click', console.log); However, the fiddle demonstrates that this approach ...