摘要:Ng-grid的依值切換CellTemplate+ng-switch on /ng-swith-when=2 ；每一列為Input type="text",最後一列變成DIV
headerCellTemplate : "<div class='ngHeaderText' style='text-align:right;background-color: #579fd8;color: white;'>金額</div>",
// Code goes here
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.val = [{name: "ab", value: "4"},
{name: "cd", value: "5"}];
$scope.gridOptions = {
data: 'val',
columnDefs: [
{field: "name", displayName: "Name"},
{field: "value", displayName: "Value", cellTemplate: '<div class="getData" my-data="{{row.getProperty(col.field)}}"></div>'}
]
};
});
app.directive('getData', function() {
return {
restrict: 'C',
replace: true,
transclude: true,
scope: { myData: '@myData' },
template: '<div ng-switch on="myData">' +
'<div ng-switch-when="4" style="text-align:right">{{myData}}</div>' +
'<input type="text" ng-switch-when="5" value="{{myData}}"/>' +
'<div ng-switch-default class="grid">No Data</div>' +
'</div>'
}
});
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="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle height" ng-grid="gridOptions"></div>
</body>
</html>
http://plnkr.co/edit/ENj00Re3bfaVGPlomhFG?p=preview
