Angularjs 在角度UI网格中提前键入功能
有人在Angular的UI网格中实现了类型先行功能吗？我希望在用户键入名称后立即在网格单元格中进行自动建议（建议应基于JSON数据）Angularjs 在角度UI网格中提前键入功能,angularjs,angular-ui-grid,Angularjs,Angular Ui Grid,有人在Angular的UI网格中实现了类型先行功能吗？我希望在用户键入名称后立即在网格单元格中进行自动建议（建议应基于JSON数据） 在本例中，只要用户编辑一个名称并开始键入一个新名称，建议就应该基于JSON数据填充。在这方面找不到太多帮助。请按照下面的示例进行尝试 这是你的电话号码 Html 请按照下面的示例进行尝试 这是你的电话号码 Html 我无法读取JSON并在网格单元格中填充选项。你能看看我的plunker吗？我无法读取JSON并填充网格单元格中的选项。你能看看我的皮包吗？ var
在本例中，只要用户编辑一个名称并开始键入一个新名称，建议就应该基于JSON数据填充。在这方面找不到太多帮助。请按照下面的示例进行尝试 这是你的电话号码 Html
请按照下面的示例进行尝试 这是你的电话号码 Html
我无法读取JSON并在网格单元格中填充选项。你能看看我的plunker吗？我无法读取JSON并填充网格单元格中的选项。你能看看我的皮包吗？
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;
});
}]);
<!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>
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
}
]
};
});
var app = angular.module('plunker', ['ui.grid', 'ui.grid.edit', 'ui.bootstrap']);