Question

是否有人在Angular的UI网格中实现了提前输入功能？我想在用户输入名称时立即在网格单元格中建议自动建议（建议应该基于JSON数据）。

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数据填充建议。无法找到很多帮助。

Answer 1

请尝试如下图所示。

以下是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']);

Angular UI Grid

1 个答案: