Question

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

我的问题是：

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

一开始似乎有效，但是当我完成一个单元格的编辑并使焦点静音时，该值就会消失。

以下是查看活动正在运行的链接： 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);
          }
      };
  });
}());

文件：cell-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中阅读更多相关内容，请参阅第34页;可编辑单元格模板＆＃34;

将您的cell-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 - 在单元格中添加事件按键

1 个答案: