Here i want to dynamically update the display name or field of grid headers according to any user input value.
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Getting Started With ngGrid Example</title>
<link rel="stylesheet" type="text/css" href="ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="ng-grid-1.3.2.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.gridOptions = {
data: 'myData',
columnDefs: [{field: 'name', displayName: 'Name'},
{field:'age', displayName:'Age', cellTemplate: '<div ng-class="{red: row.getProperty(col.field) > 40}"><div class="ngCellText">{{row.getProperty(col.field)}}</div></div>'}]
};
});
</script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>
Now my requirement is:-
IN HTML There would be something like
A Dropdown in which there are my All Grid Headers value. ANd corresponding there would be a input box
When user select any particular grid header from dropdown, then corresponding input value get mapped to that header , and my grid get also updated according to modified header.
See the following example...
In the example, I am watching the changes on the select drop down, as well as watching the changes to the new field name. When the name change, it will rebuild the ng-grid column using self.gridOptions.ngGrid.buildColumns().
(function() {
'use strict';
angular.module('myApp', ['ngGrid']);
angular.module('myApp')
.controller('myCtrl', myCtrl);
myCtrl.$inject = ['$scope', '$log'];
function myCtrl($scope, $log) {
var self = this;
self.myData = [
{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}
];
self.selectedColumn = null;
self.selectedFieldName = null;
$scope.$watch(function() { return self.selectedColumn; },
function(newValue, oldValue) {
$log.info(oldValue, newValue);
self.selectedFieldName = newValue.displayName;
}
);
$scope.$watch(function() { return self.selectedFieldName; },
function(newValue, oldValue) {
self.selectedColumn.displayName = newValue;
self.gridOptions.ngGrid.buildColumns();
}
);
self.columnDefs = [
{field: 'name', displayName: 'Name'},
{field:'age', displayName:'Age', cellTemplate: '<div ng-class="{red: row.getProperty(col.field) > 40}"><div class="ngCellText">{{row.getProperty(col.field)}}</div></div>'}
];
$scope["vm"] = self;
self.gridOptions = {
data: 'vm.myData',
columnDefs: self.columnDefs
};
}
}());.gridStyle {
border: 1px solid rgb(212,212,212);
height: 300px
}<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.debug.js"></script>
<div ng-app="myApp" ng-controller="myCtrl as vm">
<select ng-options="column.field for column in vm.columnDefs" ng-model="vm.selectedColumn"></select>
<input type="text" ng-model="vm.selectedFieldName">
<div class="gridStyle" ng-grid="vm.gridOptions"></div>
</div>