Assign the css of a class to another class's css in javascript

Question

I've to dynamically generate a div. I am using bootstrap panel for displaying the div. The class of the div can be one of the two: panel panel-success or panel panel-danger which is decided based on the response data I get from the server. The server response is success or failure.

I want to assign class success or failure to the above div and in my css file, I want to say that the class success is equivalent to panel panel-success and class failure is equivalent to panel panel-danger

I'm using ui-grid and the div i'm talking about is one of the cell of the grid.It is defined in statusTemplate1, statusTemplate2 and statusTemplate3. Below is the code:

Javacsript File

angular.module('Spectacle', ['ui.grid'])
.controller('SpectacleCtrl',
function($scope, $http, $q) {
$scope.loaded = true;
$scope.myData = [];
var statusTemplate1 = '<div class="panel panel-success">{{row.entity.build1.number}} <span class="label label-success">P-{{row.entity.build1.passCount}}</span> <span class="label label-danger">F-{{row.entity.build1.failCount}}</span> <span class="label label-warning">S-{{row.entity.build1.skipCount}}</span></div>';
var statusTemplate2 = '<div class="panel panel-success">{{row.entity.build2.number}} <span class="label label-success">P-{{row.entity.build2.passCount}}</span> <span class="label label-danger">F-{{row.entity.build2.failCount}}</span> <span class="label label-warning">S-{{row.entity.build2.skipCount}}</span></div>';
var statusTemplate3 = '<div class="panel panel-success">{{row.entity.build3.number}} <span class="label label-success">P-{{row.entity.build3.passCount}}</span> <span class="label label-danger">F-{{row.entity.build3.failCount}}</span> <span class="label label-warning">S-{{row.entity.build3.skipCount}}</span></div>';
$scope.gridOptions = { data: 'myData',rowHeight:62 };
$scope.gridOptions.columnDefs = [
                   { field: 'job' },
                   { field: 'build1',cellTemplate: statusTemplate1},
                   { field: 'build2',cellTemplate: statusTemplate2},
                   { field: 'build3',cellTemplate: statusTemplate3},
                   { field: 'build4'},
                   { field: 'build5'}
                 ];

function fnGetList(url)
{
  var deferred = $q.defer();
$http.get(url)
.success(function (data)
{
console.log("Data: " + data.buildList[0].number);
deferred.resolve(data);
});
return deferred.promise;
};

$scope.GetGridData = function ()
{
console.log("In GetGridData: " + "Getting the data");
$http.get('http://localhost:8989/api/job').
    then(function(response) {
        $scope.totalJobs = 2;
        $scope.totalBuilds = 5;
        console.log($scope.totalJobs);
        $scope.jobs = response.data.jobs;
        $scope.loaded = false;
        console.log($scope.jobs);
        console.log('size of the response data:'+ response.data.jobs.length +' ');
        for(var i=0; i<response.data.jobs.length; i++)
        {
          console.log('The jobid for job '+i+' is:'+response.data.jobs[i].id);
          var url = "http://localhost:8989/api/job/"+response.data.jobs[i].id+"";
          fnGetList(url).then(function (content)
          {
              //  Assuming your content.data contains a well-formed JSON
              console.log('Content: '+content.name);
              if (content !== undefined)
              {
                console.log('promise success: '+content);
                console.log('printing grid options:'+$scope.gridOptions.data);
                $scope.myData.push({
                  "job": content.name,
                  "build1": content.buildList[0],
                  "build2": content.buildList[1],
                  "build3": content.buildList[2]
                  // "build4": content.buildList[3].number,
                  // "build5": content.buildList[4].number
                });
              }
          });
        }
    });
};
});

HTML Code

<div class="gridStyle" ui-grid="gridOptions" ng-init="GetGridData()"></div>

Also it's not clear if you want to do this in CSS or JS. If you mean assign one CSS class to another, it's not really [possible without a preprocessor like SASS or LESS](http://stackoverflow.com/questions/1065435/can-a-css-class-inherit-one-or-more-other-classes). If you mean use JS then you would just assign the panel "panel-success" on success and "panel-danger" on failure and you wouldn't need another CSS class. — Carol Skelly, Feb 09 '17 at 13:26
what's wrong with `if(response=="success") { $('.gridStyle').addClass('panel panel-success') } else { $('.gridStyle').addClass('panel panel-danger') }`?? (or something similar if you're not using jquery) — LordNeo, Feb 09 '17 at 13:48
@LordNeo gridStyle is the class for the whole table and not the row cell. Row cell is getting created dynamically(see statusTemplate1 in the js file above) — eureka19, Feb 09 '17 at 13:52
@eureka19 then remove panel-success and panel-danger from the templates (leave just panel) and add some custom class you can call (or better yet, some id if you're only throwing back one) — LordNeo, Feb 09 '17 at 13:56

score 0 · Accepted Answer · answered Feb 10 '17 at 06:27

This is how I fixed it:

'<div ng-class="\'{{row.entity.build2.status}}\'? \'panel panel-success\' : \'panel panel-danger\'">{{row.entity.build2.number}} <span class="label label-success">P-{{row.entity.build2.passCount}}</span> <span class="label label-danger">F-{{row.entity.build2.failCount}}</span> <span class="label label-warning">S-{{row.entity.build2.skipCount}}</span></div>';

Used the conditional statement (condition?true:false) with ng-class

Assign the css of a class to another class's css in javascript

1 Answers1