Angularjs 和 ui-grid - 在单元格中添加事件按键

Question

首先，我想说我是 angularjs 的初学者 :D

我的问题是：

我正在尝试在用户编辑 angular ui-grid 上的单元格中的值时添加按键事件。

一开始它似乎有效，但是当我完成单元格编辑并将焦点静音时，该值消失了。

这里是link看事件运行:https://plnkr.co/edit/vw8W6PqFt11nt4BDhWu9

这是我的代码：

文件：index.html

<!doctype html>
<html ng-app="app">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
    <script src="//cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.6/ui-grid.min.js"></script>
    <link rel="stylesheet" href="//cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.6/ui-grid.min.css" type="text/css" />
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

<div ng-controller="MainCtrl">
  <div id="grid1" ui-grid="gridOptions" ui-grid-edit class="grid"></div>
</div>

    <script src="app.js"></script>
  </body>
</html>

文件：app.js

(function() {
  var app = angular.module('app', ['ui.grid', 'ui.grid.edit']);

  app.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
    $scope.gridOptions = {
      columnDefs: [{
        field: 'name'
      }, {
        field: 'amount',
        name: 'Number'
      }, {
        field: 'someValue',
        name: 'SomeValue',
        editableCellTemplate: 'template-cell.html'
      }]
    };

    $http.get('data.json')
      .success(function(data) {
        $scope.gridOptions.data = data;
      });
  }]);

  app.directive('numbersOnly', function () {
      return {
          require: 'ngModel',
          link: function (scope, element, attr, ngModelCtrl) {
              function fromUser(text) {
                  if (text) {
                      var transformedInput = text.replace(/[^0-9]/, '');

                      if (transformedInput !== text) {
                          ngModelCtrl.$setViewValue(transformedInput);
                          ngModelCtrl.$render();
                      }
                      return transformedInput;
                  }
                  return undefined;
              }            
              ngModelCtrl.$parsers.push(fromUser);
          }
      };
  });
}());

文件：细胞-template.html

<div>
  <form name="inputForm">
    <input type="text" 
           ui-grid-editor 
           ng-model="someValue" 
           data="row.entity.someValue"
           ng-class="'colt' + col.uid" 
           numbers-only />
  </form>
</div>

我只需要按键事件的功能。如何使用输入字段值更新模型？

谢谢。

Answer 1

问题是您的列值未正确绑定到单元格模板中的 ngModel。

正确的值是使用 MODEL_COL_FIELD，您可以在 wiki 中阅读更多相关信息，请参阅 "Editable Cell Templates"

部分

将您的单元格-template.html更新为

<div>
  <form name="inputForm">
    <input type="text" 
           ui-grid-editor 
           ng-model="MODEL_COL_FIELD" 
           ng-class="'colt' + col.uid" 
           numbers-only />
  </form>
</div>

Angularjs 和 ui-grid - 在单元格中添加事件按键

Angularjs and ui-grid - add event keypress in cell

javascript

angularjs

angular-ui-grid

ui-grid