JavaScriptの別のクラスのCSSにクラスのCSSを割り当てます。

Question

divを動的に生成しました。私はブートストラップパネルを使用してdivを表示しています。 divのクラスは、パネルパネル成功またはパネルパネル危険のいずれかです。これはサーバーから取得した応答データに基づいて決定されます。サーバーの応答はの成功またはの失敗です。

私は上記のdivにクラス成功または失敗を割り当てたいと私のCSSファイルで、私はクラス成功がパネルパネル-成功とクラス故障と等価であることを言いたい statusTemplate1、statusTemplate2とstatusTemplate3で定義されている私は、UI-グリッドを使用していると私が話しているのdivがgrid.Itのセルの一つである

パネルパネル-危険に相当します。以下 はコードです：

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> 

Answer 1

これは私がそれを固定する方法である：

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