javascript - Angular js Dynamic Grid Header -
here want dynamically update display name or field of grid headers according user input value.
<html ng-app="myapp"> <head lang="en"> <meta charset="utf-8"> <title>getting started 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 requirement is:-
in html there like
a dropdown in there grid headers value. , corresponding there input box
when user select particular grid header dropdown, corresponding input value mapped header , , grid updated according modified header.
- guys please me, stuck in doing in angular , important me
see following example...
in example, watching changes on select drop down, watching changes new field name. when name change, rebuild 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 vm"> <select ng-options="column.field 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>
Comments
Post a Comment