2017-01-25 19 views
0

私は2つの列firstNameとlastNameを含むuiグリッドを持っています。最初の列(firstName)に背景色を青に設定しました。 lastNameヘッダー列をクリックすると、lastName列が青に、firstName列がnormalに変更されます。セルの色の角度とuiグリッドを変更する

Googleで検索して検索しましたが、その例が見つかりませんでした。

どうすればいいですか?ここで

は、ここに私のapp.js

var app = angular.module('app', ['ngTouch', 'ui.grid']); 

    app.controller('MainCtrl', [ 
    '$scope','uiGridConstants', function($scope, uiGridConstants) { 

    $scope.gridOptions = { 
     columnDefs: [{ 
     name: 'firstName', 
     field: 'firstName', 
     displayName: 'voornaam', 
     width: 200, 
     cellClass: 'columnClassName' 
     }, { 
     name: 'lastName', 
     field: 'lastName', 
     displayName: 'achternaam', 
     width: 200 
     }], 
     data: [{ 
     "firstName": "Cox", 
     "lastName": "Carney", 
     "company": "Enormo", 
     "employed": true 
     }, { 
     "firstName": "Lorraine", 
     "lastName": "Wise", 
     "company": "Comveyer", 
     "employed": false 
     }, { 
     "firstName": "Nancy", 
     "lastName": "Waters", 
     "company": "Fuelton", 
     "employed": false 
     }] 
    }; 

    $scope.loadData = function() { 
     console.log("clicked"); 
    } 
    } 
]); 

である私のhtmlここ

<!doctype html> 
<html ng-app="app"> 
    <head> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <link rel="stylesheet" type="text/css" href="css/ui-grid.css"> 

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script> 
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script> 
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script> 
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script> 
    <script src="js/ui-grid.js"></script> 
    <!-- <script src="/release/ui-grid.css"></script> --> 

    <script src="js/app.js"></script> 
    </head> 
    <body> 
    <div ng-controller="MainCtrl as ctrl"> 
     <div id="grid" ui-grid="gridOptions" class="grid"></div> 
    </div> 
    </body> 
</html> 

は上をクリックするとあなたは、昔ながらのCSS、 を使用することができ、私のCSS

.grid { 
    width: 500px; 
    height: 250px; 
} 

.red { 
    color: white; background-color: gray !important; 
} 

.my-css-class { 
    color: blue 
} 

.columnClassName[aria-sort="ascending"], .columnClassName[aria-sort="descending"] { 
    background-color: blue !important; 
} 
+0

ng-tableでng-classで行いました。コードを表示できますか? –

答えて

0

ですヘッダー属性が追加されます。 aria-sort = "ascending"またはaria-sort = "descending"

. sortable[aria-sort="ascending"], . sortable[aria-sort="descending"] { 
    background-color: blue; 
} 
+0

あなたのcolumnDefsにどのように追加しますか? – baliman

+0

コードスニペットを添付してください –

+0

私はコードを追加しました投稿開始 – baliman

関連する問題