將一個類的CSS分配給另一個類的CSS在javascript中

-3

我必須動態生成一個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>

來源

2017-02-09 eureka19

你的代碼在哪裏？ – void

也不清楚你是否想在CSS或JS中這樣做。如果你的意思是分配一個CSS類到另一個，它不是真的[沒有像SASS或LESS的預處理器]（http://stackoverflow.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

來源

2017-02-10 06:27:32 eureka19

將一個類的CSS分配給另一個類的CSS在javascript中

回答

相關問題