Alter the td styling depending on the value using AngularJS

I need to dynamically change the style of each td in a column based on its value. There are five different statuses, so each status should have a unique border-color and font-color assigned to it. How can I achieve this using Angular script without hard-coding (I am new to Angular)?

This is what I have tried:

In my HTML file:

<table st-table = "tenants" class="table table-striped table-bordered">
   <tbody>
    <tr dir-paginate="t in tenants | orderBy:sortColumn:reverseSort | filter:searchText | itemsPerPage:itemsPerPage" current-page="currentPage" >
       <td ng-if="t.status.color==2"><b class = 'td_status'>{{t.status.id}}<b></td>

In my CSS file:

.td_status {
   border-radius: 20px;
   width: auto;
  height: auto;
 min-width: 100px;
 display: inline-block;
 text-align: center;
 border: 1px solid red;
 padding: 5px;
}

In my JavaScript file:

datax.forEach(function(obj,i){  
    if (obj.last_paid) {
            if (obj.stripe_status == "active") {
              obj.status = {
                'id' : "Paid: Last Paid " + $filter('date')(obj.last_paid, 'MM-dd-yyyy'),
                'value': "Paid: Last Paid " + $filter('date')(obj.last_paid, 'yyyy-MM-dd HH:mm:ss Z'),
                'color' : 0
              }
            }
       else if (obj.stripe_status == "past_due" || obj.stripe_status == "unpaid") {
              obj.status = {
                'id' : "Past Due: Last Paid " + $filter('date')(obj.last_paid, 'MM-dd-yyyy'),
                'value': "Past Due: Last Paid " + $filter('date')(obj.last_paid, 'yyyy-MM-dd HH:mm:ss Z'),
                'color' : 4,
              }
            }....

Answer №1

During a slow period at work, I decided to create a demo.

In this example, I utilized ng-class. By passing the status from $scope.data and utilizing item.status in my ng-repeat, I am able to dynamically apply styles based on the status.

<div ng-app="TestApp" ng-controller="TestController">
  <p ng-repeat="item in data" ng-class="getBorderColor(item.status)">
  {{item.name}}
  </p>
</div>

Below is the controller code along with some sample data. The getBorderColor function evaluates the status and assigns a corresponding class name.

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

app.controller('TestController', function($scope) {
  $scope.data = [
    {
      name:'Ronnie',
      status:1
    },
    {
      name:'Chance',
      status:2
    },
    {
      name:'Mike',
      status:1
    },
    {
      name:'Mark',
      status:3
    }];

    $scope.getBorderColor = function(status) {
      var className = '';
      if (status == 1) {
        className = 'status1';
      } else if (status == 2) {
        className = 'status2';
      } else if (status == 3) {
        className = 'status3';
      }
      return className;
    };
});

Here is the simple CSS styling:

.status1 {
  border:1px solid red;
}

.status2 {
  border:1px solid blue;
}

.status3 {
  border:1px solid green;
}

You can view the implementation on JSFiddle.

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

Navigating Joomla with a Menu specifically designed for articles within a specific category

After recently starting to navigate Joomla, I've hit a roadblock with a seemingly simple task. I have multiple articles, each belonging to a specific category. My goal is to create a menu that displays all articles within a chosen category. When sele ...

Is there a way to add a dynamic animation of steam rising from a coffee cup to my SVG icon design?

I'm a budding graphic designer eager to master the art of SVG animated icons and coding. Recently, I created an SVG file of a beautiful cup of coffee using Illustrator and now I want to make the steam rise realistically through animation. However, des ...

Troubleshooting problem with cell background color in ng-grid cellTemplate

When the value in my data is an empty string "" and I apply a background color in cellTemplate, the entire cell is not colored. Take a look at this plunke that demonstrates the issue. http://plnkr.co/edit/TP4VH9xA7qCFT8xgNKW8?p=preview I'm seeking a ...

Protractor tests encountering failure due to the absence of any value in the model

A sample fiddle is being tested using Protractor. Here are the test cases: describe("Fiddle homepage", function() { beforeEach(function() { browser.get('http://fiddle.jshell.net/yfUQ8/9/show'); browser.rootEl = 'div&a ...

Show text and image side by side on the same row

I am looking to showcase both image and text on the same line, similar to how it's done on tripadvisor.in/ <div style="display:inline-block"> <div style="display:inline;float:left"> <a href="CollegeProfile.php" class="white"> <h ...

Stepping up your design game by customizing the bootstrap container class for multiple pages

Looking for a solution to customize container-width, @gutter-width, and @column-width for two pages - landing and home? Let's discuss how to achieve this. Currently using less framework and merging all less files for production code deployment. Need ...

Creating a collapsible accordion feature with jQuery using a specific HTML layout: wanna learn how?

I am looking to create an accordion effect with the structure provided below. The goal is to have the corresponding article toggle when clicking on .booklist>li>a, allowing only one article to be open at a time. Can someone assist me with writing thi ...

Having trouble accessing the iframe element in an Angular controller through a directive

My webpage contains an iframe with a frequently changing ng-src attribute. I need to execute a function in my controller each time the iframe's src changes, but only after the iframe is fully loaded. Additionally, I require the iframe DOM element to b ...

Leveraging CSS nth-child selector in conjunction with ngFor in angular2

Looking for a way to style odd and even rows differently in my dynamically generated table using ngFor directive in angular2. *ngIf="AreThereMyOldMessages" *ngFor="let oldm of MyOldMessages;let i=index" *ngIf="AreThereMyNe ...

What are some ways to enlarge the dx-treeview when a new item is added?

I created an application using AngularJS that involves performing CRUD operations on Categories and Phones. I need help expanding the dx-treeview to display newly added items. https://i.stack.imgur.com/GSaPp.png When I click on the Save button, it takes ...

Is there a way to implement a css/javascript property specifically for a div that is selected in the url?

Take for instance the scenario where I possess the URL example.com/#foo. In this case, CSS styling will be directed to the div with the id foo. If achieving this solely in CSS is not feasible, what methods in JavaScript or jQuery can be used efficiently ...

The background image fails to load in ReactJS application

Usually, I have no trouble finding solutions to my problems, but this time I'm really stuck - and I apologize in advance if my question seems silly or trivial. I am currently working on a simple React app where I need to set a background image for th ...

having each individual div function on its own accord

Is there a more efficient way to make HTML and CSS function independently without duplicating the code multiple times and changing IDs or class names? Currently, only the top male and female button works when clicked. I am looking for a CSS-only solution t ...

AngularJS Kendo UI: Elevating Your Web Development Experience

This is my first time working on an Angular Js application as part of a project requirement. I have been searching online for documentation on installing Kendo for Angular, but most resources seem to focus on Angular instead of Angular Js. Is it possible ...

Exploring the functionality of angularjs filters with pre-set checkbox options

I'm trying to create a checkbox list to filter another list, but I'm running into some issues. Here is how I have set up my checkboxes: <input type="checkbox" ng-model="characteristics.nontraditional" ng-true-value="non-tradtional" ng-false-v ...

Alter the CSS display based on the user's userAgent if they are using an iPhone and window.navigator.standalone is set to true

Looking to create a unique webAPP with different content displays based on how it is accessed. If the user opens the webAPP through their Safari browser Or if they open the webAPP from a webclip on their home screen The detection is functioning, as conf ...

Update ng-repeat in AngularJS

I am looking to develop a time tracker using AngularJS. Below is the HTML code implementation: <tr ng-repeat="task in tasks"> <td>1</td> <td>{{task.name}}</td> <t ...

Overflow of nested item within flex container

I'm trying to make the content under "foo" fully scrollable, but I've been unsuccessful using flexbox. I attempted it with min-height, yet it didn't work out. Check out this JSFiddle for reference $('.ui.dropdown') .dropd ...

Issue with the Styled Components Color Picker display

For the past 6 months, I have been using VSCode with React and Styled Components without any issues. However, recently I encountered a problem where the color picker would not show up when using CSS properties related to color. Usually, a quick reload or r ...

Is there a way to dynamically incorporate line numbers into Google Code Prettify?

Having some trouble with formatting code and inserting/removing line numbers dynamically. The line numbers appear on the first page load, but disappear after clicking run. They don't show at all on my website. I want to allow users to click a button a ...