CODEWITHSUNDEEP
cssangularjshtml-table
Kay_S
Kay_S

Reputation: 89

Change td style based on value in angular

I have a column where the style of each td needs to be changed based on value. There are five status's, so there has to be five different border-colors and font-colors. How do I do this in angular script without hard-coding (new to angular)?

Please click here for example.

What I am doing is:

In html:

<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 css:

.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 js:

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,
              }
            }....

Upvotes: 1

Views: 3200

Answers (1)

Ronnie
Ronnie

Reputation: 11198

I made an example since it is a little slow at work.

Here you can see my use of ng-class. I give it a function and pass the status which is defined in $scope.data item.status comes from my ng-repeat

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

Below I have my controller and some sample data. The getBorderColor runs through its conditions and returns className based off of status.

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;
    };
});

And my simple css is:

.status1 {
  border:1px solid red;
}

.status2 {
  border:1px solid blue;
}

.status3 {
  border:1px solid green;
}

https://jsfiddle.net/ojzdxpt1/7/

Upvotes: 2

Related Questions