角度UIグリッドの先行機能を入力してください

AngularのUIグリッドで先行機能を実装した人は誰ですか？ユーザーが名前を入力するとすぐにグリッドセルに自動提案が必要です（提案はJSONデータに基づいている必要があります）。ここでは、この例では角度UIグリッドの先行機能を入力してください

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; 
}); 
}]);

とすぐに、ユーザーが名前を編集し、提案はJSONデータをもとに取り込む必要があり、新しいものを入力し始めると。それについて多くの助けを見つけることができません。

出典

2016-05-09 Tanuj

下記の例のように試してください。ここ

が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 as state.name for 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']);

出典

2016-05-09 21:08:06 Sampath

私はJSONを読んで、グリッドセルのオプションを移入することができません。私のプランナーを見てもらえますか？ – Tanuj

角度UIグリッドの先行機能を入力してください

答えて

関連する問題