AngularJS：在頭文件中覆蓋cellClass

如果我在ng-grid字段中應用一類「text-right」，甚至頭文件單元格都會受到影響，看起來很奇怪。有誰知道如何覆蓋這個，並讓這個類隻影響數據？AngularJS：在頭文件中覆蓋cellClass

這裏有一個plunker

main.js

var app = angular.module('myApp', ['ngGrid']); 
app.controller('MyCtrl', function($scope) { 

    $scope.heroes = [ 
    { 
     id: 1, 
     name: 'Iron Man', 
     fname: 'Tony', 
     lname: 'Stark', 
     alias: 'Tony Stark', 
     location: 'Stark Tower', 
     comic: 'Marvel', 
     intelligence: 99.6, 
     strength: 85.0, 
     speed: 57.9, 
     durability: 85 
    }, 
    { 
     id: 2, 
     name: 'Batman', 
     fname: 'Bruce', 
     lname: 'Wayne', 
     alias: 'Bruce Wayne', 
     location: 'Bat Cave', 
     comic: 'DC', 
     intelligence: 97.4, 
     strength: 18, 
     speed: 27.9, 
     durability: 42 
    }, 
    { 
     id: 3, 
     name: 'Superman', 
     fname: 'Clark', 
     lname: 'Kent', 
     alias: 'Clark Kent', 
     location: 'Metroplis', 
     comic: 'DC', 
     intelligence: 89.4, 
     strength: 99.8, 
     speed: 99.9, 
     durability: 91.9 
    }, 
    { 
     id: 1, 
     name: 'Daredevil', 
     fname: 'Jack', 
     lname: 'Murdock', 
     alias: 'Jack Murdock', 
     location: 'Court Room', 
     comic: 'Marvel', 
     intelligence: 75.4, 
     strength: 13.8, 
     speed: 27, 
     durability: 28.3 
    }, 
    { 
     id: 5, 
     name: 'Flash', 
     fname: 'Barry', 
     lname: 'Allen', 
     alias: 'Barry Allen', 
     location: 'Speedline', 
     comic: 'DC', 
     intelligence: 63, 
     strength: 10, 
     speed: 100, 
     durability: 59.9 
    }, 
    { 
     id: 6, 
     name: 'Hulk', 
     fname: 'Bruce', 
     lname: 'Banner', 
     alias: 'Bruce Banner', 
     location: 'Labratory', 
     comic: 'Marvel', 
     intelligence: 88, 
     strength: 100, 
     speed: 46.7, 
     durability: 100 
    }, 
    { 
     id: 7, 
     name: 'Hawkeye', 
     fname: 'Clint', 
     lname: 'Barton', 
     alias: 'Clint Barton', 
     location: 'Nest', 
     comic: 'Marvel', 
     intelligence: 56.7, 
     strength: 12.8, 
     speed: 23, 
     durability: 14 
    }, 
    { 
     id: 8, 
     name: 'Thor', 
     fname: 'Donald', 
     lname: 'Blake', 
     alias: 'Donald Blake', 
     location: 'Asgard', 
     comic: 'Marvel', 
     intelligence: 69.4, 
     strength: 99.8, 
     speed: 91.9, 
     durability: 100 
    } 
    ]; 

    $scope.gridOptions = { 
     data: 'heroes', 
     //showGroupPanel: true, 
     enableRowSelection: false, 
     enableCellEdit: true, 
     columnDefs: [ 
      {field: 'name', displayName: 'Name', enableCellEdit: true}, 
      {field: 'alias', displayName: 'Alias'}, 
      {field: 'strength', displayName: 'Strength', cellFilter: 'number:1', cellClass: "text-right"}, 
      {field: 'comic', displayName: 'Comic'} 
      ] 
    }; 
});

的index.html

<!DOCTYPE html> 
<html ng-app="myApp"> 
    <head lang="en"> 
     <meta charset="utf-8"> 
     <title>Custom Plunker</title> 
     <link rel="stylesheet" type="text/css" href="ng-grid.css" /> 
     <link rel="stylesheet" type="text/css" href="style.css" /> 
     <script src="jquery.min.js"></script> 
     <script src="angular.min.js"></script> 
     <script type="text/javascript" src="ng-grid.debug.js"></script> 
     <script type="text/javascript" src="main.js"></script> 
    </head> 
    <body ng-controller="MyCtrl"> 
     <div class="gridStyle" ng-grid="gridOptions"></div> 
    </body> 
</html>

的style.css

.gridStyle { 
    border: 1px solid rgb(212,212,212); 
    width: 500px; 
    height: 300px 
} 

.text-right{ 
    text-align: right; 
}

來源

2014-10-07 jgravois

該plunker鏈接似乎不匹配此代碼。例如，style.css沒有.text-right – lmyers 2014-10-07 15:39:06

對不起，我想我沒有保存plunker – jgravois 2014-10-07 15:40:30

你可以使用一個更具體的/定製CSS選擇：

.gridTextRight .ngViewport{ 
    text-align: right; 
}

否則，請確保您text-right類是專門適用於您要對齊的內容。

編輯：這就是說，看起來很奇怪，如果只是數據是正確對齊的（不是標題單元格）。如果你只是想保持其它區域（分組等）左對齊，那麼你就需要爲gridTextRight .ngHeaderContainer添加CSS選擇器以及：

.gridTextRight .ngViewport, .gridTextRight .ngHeaderContainer{ 
    text-align: right; 
}

來源

2014-10-07 15:41:15 DRobinson

我不認爲ng-grid API提供了專門應用類的選項...我是現在嘗試你的代碼 – jgravois 2014-10-07 15:44:02

不，它只是左對齊了頭文件和數據 – jgravois 2014-10-07 15:46:30

如果你使用我添加的CSS，確保你添加類'gridTextRight'到網格。 – DRobinson 2014-10-07 15:48:22

這是一個帶cellTemplate您plunker隻影響數據，而不是頭：

http://plnkr.co/edit/ZHTSejyJuSrkiSnEEuj8?p=preview

模板：

var myCellTemplate = "<div class='text-right'>{{row.getProperty(col.field)}}</div>";

和模板規範：

{field: 'strength', displayName: 'Strength', cellFilter: 'number:1', cellTemplate: myCellTemplate /*cellClass: "text-right"*/},

來源

2014-10-07 15:50:25 lmyers

真棒...我不明白cellTemplate在API中，所以我沒有考慮它，但這是非常重要和有用的 – jgravois 2014-10-07 15:54:24

AngularJS：在頭文件中覆蓋cellClass

回答

相關問題