文章/答案/技术大牛

发布

社区首页 >问答首页 >AngularJS:在标头中覆盖cellClass

问AngularJS:在标头中覆盖cellClass
EN

Stack Overflow用户

提问于 2014-10-07 15:32:30

回答 2查看 1.7K关注 0票数 0

如果我将“文本-右”类应用于ng-网格字段，甚至头部单元格也会受到影响，看起来也很奇怪。有没有人知道如何覆盖这个，并且类只影响数据？

这是一个柱塞

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

angularjs

ng-grid

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-10-07 15:41:15

您可以使用更具体/定制的CSS选择器：

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

否则，请确保将text-right类专门应用于您希望对齐的内容。

编辑：说，如果数据是对齐的(而不是头单元格)，我觉得很奇怪。如果你只是想保持其他领域(分组等)然后，您也需要为gridTextRight .ngHeaderContainer添加一个CSS选择器：

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

票数 1

Stack Overflow用户

发布于 2014-10-07 15:50:25

下面是只影响数据而不影响头的cellTemplate柱塞：

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"*/},

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/26239758

复制

相似问题

问AngularJS:在标头中覆盖cellClass
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS:在标头中覆盖cellClassEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS:在标头中覆盖cellClass
EN