angularjs - Type ahead feature in Angular UI Grid -
has implemented type ahead feature in angular's ui grid? want auto suggestion in grid cells user types name (suggestions should based on json data).
http://plnkr.co/edit/pbktcqgswr5kxjiqg3bp?p=preview
var app = angular.module('app', ['nganimate', 'ngtouch', 'ui.grid','ui.grid.edit', 'ui.grid.savestate', 'ui.grid.selection', 'ui.grid.cellnav', 'ui.grid.resizecolumns', 'ui.grid.movecolumns', 'ui.grid.pinning', 'ui.grid.grouping' ]); app.controller('mainctrl', ['$scope', '$http', '$interval', function ($scope, $http, $interval) { $scope.gridoptions = { savefocus: false, savescroll: true, savegroupingexpandedstates: true, enablefiltering: true, columndefs: [ { name: 'name' }, { name: 'gender' }, { name: 'company' } ], onregisterapi: function(gridapi){ $scope.gridapi = gridapi; } }; $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json') .success(function(data) { $scope.gridoptions.data = data; }); }]); here in example user edits name , starts typing new 1 suggestions should populate based on json data. can't find on it.
please try shown below example.
here working plunker
html
<!doctype html> <html ng-app="plunker"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.2.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src="http://ui-grid.info/release/ui-grid-stable.js"></script> <link rel="stylesheet" type="text/css" href="http://ui-grid.info/release/ui-grid-stable.css" /> <link rel="stylesheet" href="style.css" /> <script src="app.js"></script> <script src="controller.js"></script> <script src="statesdata.js"></script> </head> <body ng-controller="mainctrl"> hello {{name}}! <div class="gridstyle" ui-grid="gridoptions"></div> </body> </html> controller.js
app.controller('mainctrl', function($scope, statesdata) { $scope.name = 'typeahead'; $scope.states = statesdata.getstates(); $scope.mydata = [ { id: 1, state: { "id": 1, "name": "alabama", "abbreviation": "al" }, age: 50 }, { id: 2, state: { "id": 5, "name": "arkansas", "abbreviation": "ar" }, age: 50 }, { id: 3, state: { "id": 9, "name": "delaware", "abbreviation": "de" }, age: 50 }, { id: 4, state: { "id": 12, "name": "florida", "abbreviation": "fl" }, age: 50 }, { id: 5, state: { "id": 15, "name": "hawaii", "abbreviation": "hi" }, age: 50 } ]; $scope.cellstateeditabletemplate = '<div class="typeaheadcontainer"><input type="text" ' + 'class="typeaheadcontrol"' + 'ng-model="model_col_field" ' + 'uib-typeahead="name state.name state in grid.appscope.states | filter:$viewvalue | limitto:8" ' + 'ng-required="true" ' + 'typeahead-editable ="false"' + 'typeahead-on-select="grid.appscope.typeaheadselected(row.entity, $item)" ' + '/></div>'; $scope.typeaheadselected = function(entity, selecteditem) { entity.state = selecteditem; }; $scope.gridoptions = { data: 'mydata', enablerowselection: false, enablecelleditonfocus: true, multiselect: false, columndefs: [ { field: 'state.name', displayname: 'state', enablecelleditonfocus: true, editablecelltemplate: $scope.cellstateeditabletemplate, celltemplate: $scope.cellstateeditabletemplate }, { field: 'age', displayname: 'age', enablecelledit: false } ] }; }); app.js
var app = angular.module('plunker', ['ui.grid', 'ui.grid.edit', 'ui.bootstrap']);
Comments
Post a Comment