将一个类的CSS分配给另一个类的CSS在javascript中

问题描述：

我必须动态生成一个div。我正在使用引导面板显示div。 div的类别可以是以下两种之一：面板面板 - 成功或面板面板 - 危险这是根据我从服务器获得的响应数据决定的。服务器的响应是成功或失败。将一个类的CSS分配给另一个类的CSS在javascript中

我想成功或失败分配类以上的div和我的CSS文件，我想说的是，类成功相当于面板面板成功和类失败相当于面板面板危险

我使用的UI电网和我谈论的股利是grid.It的细胞之一statusTemplate1，statusTemplate2和statusTemplate3定义。下面是代码：

Javacsript文件

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代码

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

你的代码在哪里？ – void

也不清楚你是否想在CSS或JS中这样做。如果你的意思是分配一个CSS类到另一个，它不是真的[没有像SASS或LESS的预处理器]（http://*.com/questions/1065435/can-a-css-class-inherit-one-or-更其他类）。如果你的意思是使用JS，那么你只需在成功时分配面板“panel-success”，在失败时分配“panel-danger”，你就不需要另一个CSS类。 – ZimSystem

@void添加了代码 – eureka19

答

这是我如何固定它：

'<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>';

使用的条件语句（条件？ true：false）与ng-class

将一个类的CSS分配给另一个类的CSS在javascript中

相关推荐