Question

我在angularJS UI网格列中创建了一个下拉列表。事实上我在UI网格教程中使用了相同的例子。参考：http://ui-grid.info/docs/#/tutorial/201_editable 。在这里，我修改了为editableCelltemplate应用我自己的模板（partial.html）。当我更改下拉值时，它没有被捕获。 app.js http://plnkr.co/edit/UMsOeeETHxbMMdZQry90?p=preview

＆＃13;

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit', 'addressFormatter']);
 
angular.module('addressFormatter', []).filter('address', function () {
  return function (input) {
      return input.street + ', ' + input.city + ', ' + input.state + ', ' + input.zip;
  };
});
 
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
  $scope.gridOptions = {  };
  $scope.editDropdownOptionsArrayValue = [{id:1, gender:'male'},
					   {id:1, gender:'male'}
					];
 
  $scope.gridOptions.columnDefs = [
    { name: 'id', enableCellEdit: false, width: '10%' },
    { name: 'name', displayName: 'Name (editable)', width: '20%' },
    { name: 'age', displayName: 'Age' , type: 'number', width: '10%' },
    { name: 'gender', displayName: 'Gender', editableCellTemplate: 'partial.html', width: '20%',
      cellFilter: 'mapGender', editDropdownValueLabel: 'gender', editDropdownOptionsArray: $scope.editDropdownOptionsArrayValue},
    { name: 'registered', displayName: 'Registered' , type: 'date', cellFilter: 'date:"yyyy-MM-dd"', width: '20%' },
    { name: 'address', displayName: 'Address', type: 'object', cellFilter: 'address', width: '30%' },
    { name: 'address.city', displayName: 'Address (even rows editable)', width: '20%',
         cellEditableCondition: function($scope){
         return $scope.rowRenderIndex%2
         }
    },
    { name: 'isActive', displayName: 'Active', type: 'boolean', width: '10%' },
    { name: 'pet', displayName: 'Pet', width: '20%', editableCellTemplate: 'ui-grid/dropdownEditor',
      editDropdownRowEntityOptionsArrayPath: 'foo.bar[0].options', editDropdownIdLabel: 'value'
    }
  ];
 
 
 
 $scope.msg = {};
 
 $scope.gridOptions.onRegisterApi = function(gridApi){
          //set gridApi on scope
          $scope.gridApi = gridApi;
          gridApi.edit.on.afterCellEdit($scope,function(rowEntity, colDef, newValue, oldValue){
            $scope.msg.lastCellEdited = 'edited row id:' + rowEntity.id + ' Column:' + colDef.name + ' newValue:' + newValue + ' oldValue:' + oldValue ;
            $scope.$apply();
          });
        };
 
  $http.get('/data/500_complex.json')
    .success(function(data) {
      for(i = 0; i < data.length; i++){
        data[i].registered = new Date(data[i].registered);
        data[i].gender = data[i].gender==='male' ? 1 : 2;
        if (i % 2) {
          data[i].pet = 'fish'
          data[i].foo = {bar: [{baz: 2, options: [{value: 'fish'}, {value: 'hamster'}]}]}
        }
        else {
          data[i].pet = 'dog'
          data[i].foo = {bar: [{baz: 2, options: [{value: 'dog'}, {value: 'cat'}]}]}
        }
      }
      $scope.gridOptions.data = data;
    });
}])
 
.filter('mapGender', function() {
  var genderHash = {
    1: 'male',
    2: 'female'
  };
 
  return function(input) {
    if (!input){
      return '';
    } else {
      return genderHash[input];
    }
  };
})
;

＆＃13;

.grid {
  width: 600px;
  height: 450px;
}

＆＃13;

<select ng-model="gender" data-ng-options="d as d.gender for d in grid.appScope.editDropdownOptionsArrayValue">
<option value="" selected="selected">select</option>
</select>

＆＃13;

你可以看到我何时更改下拉值

gridApi.edit.on.afterCellEdit($scope,function(rowEntity, colDef, newValue, oldValue){
            $scope.msg.lastCellEdited = 'edited row id:' + rowEntity.id + ' Column:' + colDef.name + ' newValue:' + newValue + ' oldValue:' + oldValue ;
            $scope.$apply();

没有被执行。

在我申请editableCellTemplate时执行相同的操作：＆＃39; ui-grid / dropdownEditor＆＃39;默认模板。但是在客户的情况下，它没有被执行。任何变通方法/解决方案/指针都会非常有用。

Answer 1

为了拥有一个自定义编辑器，你需要编写一个指令并提供可编辑功能挂钩的事件 - 结束单元格编辑等。我为ui-grid编写了原始的下拉列表编辑器，这有点摆弄周围。包含它的提交在这里：https://github.com/angular-ui/ng-grid/pull/1561，它将提供使其工作所需的位和部分的一些概念。（在可编辑的教程中有一些提及这一点。）

选择angularjs UI网格列中的下拉列表不适用于外部editcellTemplate

1 个答案: