CSS角度のDataTableは

Question

私は

http://imgur.com/b3b1KQ1

は私がすべてのチェック記号が緑色になることをしたいのフロントエンドにこれらのデータを持って設計 、ここでは私のコード

$scope.dtColumnsCal= [ 
    DTColumnBuilder.newColumn('name').withTitle('Name') 
    .renderWith(function(data, type, full){ 
    return "<a class='row-edit'>" +"<u>"+data+ " <i>" + (full.isDefault ? "(default)" : "") + "</i>"+"</u>" +"</a>";}), 
    DTColumnBuilder.newColumn('description').withTitle('Description'), 
    DTColumnBuilder.newColumn('weekStartDay').withTitle('Starting Day of Week') 
    .renderWith(function(data,type,full){ 
     if(full.weekStartDay==1){ 
     return "Sunday" 
     } 
     if(full.weekStartDay==2){ 
     return "Monday" 
     } 
     if(full.weekStartDay==3){ 
     return "Tuesday" 
     } 
     if(full.weekStartDay==4){ 
     return "Wednesday" 
     } 
     if(full.weekStartDay==5){ 
     return "Thursday" 
     } 
     if(full.weekStartDay==6){ 
     return "Friday" 
     } 
     if(full.weekStartDay==7){ 
     return "Saturday" 
     } 
    }), 
    DTColumnBuilder.newColumn('workingDays').withTitle('M') 
    .renderWith(function(data, type, full){ 
     return data.indexOf(2)!=-1 ? '\u2713': '\u2718';} 
    ), 
    DTColumnBuilder.newColumn('workingDays').withTitle('T') 
     .renderWith(function(data, type, full){ return data.indexOf(3)!=-1 ? '\u2713' : '\u2718';}), 
    DTColumnBuilder.newColumn('workingDays').withTitle('W') 
     .renderWith(function(data, type, full){ return data.indexOf(4)!=-1 ? '\u2713' : '\u2718';}), 
    DTColumnBuilder.newColumn('workingDays').withTitle('T') 
     .renderWith(function(data, type, full){ return data.indexOf(5)!=-1 ? '\u2713' : '\u2718';}), 
    DTColumnBuilder.newColumn('workingDays').withTitle('F') 
     .renderWith(function(data, type, full){ return data.indexOf(6)!=-1 ? '\u2713' : '\u2718';}), 
    DTColumnBuilder.newColumn('workingDays').withTitle('S') 
     .renderWith(function(data, type, full){ return data.indexOf(7)!=-1 ? '\u2713' : '\u2718';}), 
    DTColumnBuilder.newColumn('workingDays').withTitle('S') 
     .renderWith(function(data, type, full){return data.indexOf(1)!=-1 ? '\u2713' : '\u2718';}), 
    DTColumnBuilder.newColumn('').withTitle('Action').renderWith(function(data, type, full){ 
     return "<a class='row-def' ng-model='click' ng-hide='click'><i ></i> <u>Set Default</u> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>" 
     + "<a class='row-del'><i class='fa fa-trash-o'></i> Delete</a>";}) 
    ].map(function(value){return value.withOption('defaultContent', '')}); 
    $scope.dtInstanceCal={}; 

}]); 

であるあなたは、日ウォーキング見ることができますUnicode文字値の列これらはチェックとクロスサインのUnicode文字値です.iこれらの色を変更したい

Answer 1

問題が短くなっている ここにコード

$scope.dtColumnsCal= [ 
    DTColumnBuilder.newColumn('name').withTitle('Name') 
    .renderWith(function(data, type, full){ 
    return "<a class='row-edit'>" +"<u>"+data+ " <i>" + (full.isDefault ?"(default)": "") + "</i>"+"</u>" +"</a>";}), 
    DTColumnBuilder.newColumn('description').withTitle('Description'), 
    DTColumnBuilder.newColumn('weekStartDay').withTitle('Starting Day of Week') 
    .renderWith(function(data,type,full){ 
     if(full.weekStartDay==1){ 
     return "Sunday" 
     } 
     if(full.weekStartDay==2){ 
     return "Monday" 
     } 
     if(full.weekStartDay==3){ 
     return "Tuesday" 
     } 
     if(full.weekStartDay==4){ 
     return "Wednesday" 
     } 
     if(full.weekStartDay==5){ 
     return "Thursday" 
     } 
     if(full.weekStartDay==6){ 
     return "Friday" 
     } 
     if(full.weekStartDay==7){ 
     return "Saturday" 
     } 
    }), 
    DTColumnBuilder.newColumn('workingDays').withTitle('M') 
    .renderWith(function(data, type,full){ 
     return data.indexOf(2)!=-1 ? "<span style='color:#27C24C';>"+'\u2713'+"</span>":"<span style='color:#E48282;'>"+ '\u2718'+"</span>";} 
    ), 
    DTColumnBuilder.newColumn('workingDays').withTitle('T') 
     .renderWith(function(data, type, full){ return data.indexOf(3)!=-1 ? "<span style='color:#27C24C;'>"+ '\u2713'+"</span>" :"<span style='color:#E48282;'>"+ '\u2718'+"</span>";}), 
    DTColumnBuilder.newColumn('workingDays').withTitle('W') 
     .renderWith(function(data, type, full){ return data.indexOf(4)!=-1 ?"<span style='color:#27C24C';>"+'\u2713'+"</span>" : "<span style='color:#E48282;'>"+ '\u2718'+"</span>";}), 
    DTColumnBuilder.newColumn('workingDays').withTitle('T') 
     .renderWith(function(data, type, full){ return data.indexOf(5)!=-1 ?"<span style='color:#27C24C';>" +'\u2713'+"</span>" : "<span style='color:#E48282;'>"+ '\u2718'+"</span>";}), 
    DTColumnBuilder.newColumn('workingDays').withTitle('F') 
     .renderWith(function(data, type, full){ return data.indexOf(6)!=-1 ?"<span style='color:#27C24C;'>"+ '\u2713'+"</span>" : "<span style='color:#E48282;'>"+ '\u2718'+"</span>";}), 
    DTColumnBuilder.newColumn('workingDays').withTitle('S') 
     .renderWith(function(data, type, full){ return data.indexOf(7)!=-1 ?"<span style='color:#27C24C;'>" +'\u2713'+"</span>" : "<span style='color:#E48282;'>"+ '\u2718'+"</span>";}), 
    DTColumnBuilder.newColumn('workingDays').withTitle('S') 
     .renderWith(function(data, type, full){return data.indexOf(1)!=-1 ? "<span style='color:#27C24C;'>"+'\u2713'+"</span>" : "<span style='color:#E48282;'>"+ '\u2718'+"</span>";}), 
    DTColumnBuilder.newColumn('').withTitle('Action').renderWith(function(data, type, full){ 
     return "<a class='row-def' ng-model='click' ng-hide='click'><i ></i> <u>Set Default</u> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>" 
     + "<a class='row-del'><i class='fa fa-trash-o'></i> Delete</a>";}) 
    ].map(function(value){return value.withOption('defaultContent', '')}); 
    $scope.dtInstanceCal={}; 

    }]);