1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | var app = angular.module( 'app' , [ 'ngGrid' ]); app.controller( 'bodyController' , function($scope, LanguageList) { $scope.myData = [{name: "Moroni" , language: 'fr' }, {name: "Tiancum" , language: 'en' }, {name: "Enos" , language: 'nl' }]; $scope.gridOptions = { data: 'myData' , enableCellSelection: true , enableRowSelection: false , enableCellEditOnFocus: true , columnDefs: [ { field: 'language' , enableFocusedCellEdit: true , editableCellTemplate: 'language_edit.html' , cellFilter : 'LanguageMap' }, {field: 'name' , enableFocusedCellEdit: true } ], canSelectRows: false }; $scope.languages = LanguageList; }) .factory( 'LanguageList' , function() { return [ { language_code : 'en' , language_title: 'English' }, { language_code : 'fr' , language_title: 'French' }, { language_code : 'nl' , language_title: 'Netherlands' } ]; }) .filter( 'LanguageMap' , function(LanguageList) { return function(input) { var languagesMatched = LanguageList.filter(function(lang) { return lang.language_code == input; }); if (languagesMatched.length == 1 ) return languagesMatched[ 0 ].language_title; else return '*unknown language*' return text; } }); |
Main page
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html> < html ng-app = "app" > < head lang = "en" > < meta charset = "utf-8" > < title >Custom Plunker</ title > < script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></ script > < script src = "//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js" ></ script > < script type = "text/javascript" src = "ng-grid.js" ></ script > < link rel = "stylesheet" href = "style.css" > < link rel = "stylesheet" href = "ng-grid.css" > < script > document.write('< base href = "' + document.location + '" />'); </ script > < script src = "app.js" ></ script > </ head > < body ng-controller = "bodyController" > < div ng-grid = "gridOptions" style = "height: 400px" > </ div > {{myData}} </ body > </ html > |
language_edit.html, dropdown template:
1 2 3 4 5 6 7 8 9 10 | < select ng-cell-input ng-options = 'l.language_code as l.language_title for l in languages' ng-class = "'colt' + $index" ng-model = "COL_FIELD" ng-input = "COL_FIELD" data-placeholder = "-- Select One --" > </ select > |
Live code: http://plnkr.co/edit/IOBXNy2hcJWbtMXZS3SO?p=preview
No comments:
Post a Comment