我在angularJS UI网格的列内创建了一个下拉列表。实际上,我采取了与UI网格tutorial.ref:http://ui-grid.info/docs/#/tutorial/201_editable中相同的示例。
。在这里,我进行了修改,以将自己的模板(partial.html)应用于editableCelltemplate。更改下拉值时,不会捕获该值。
app.js
http://plnkr.co/edit/UMsOeeETHxbMMdZQry90?p=preview



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];
    }
  };
})
;

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

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





您可以看到当我更改下拉值时

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:默认模板'ui-grid / dropdownEditor'中,执行的操作也相同。但是如果是custome,则不会执行。任何解决方法/解决方案/指针都将真正有用。

最佳答案

为了拥有一个自定义编辑器,您需要编写一条指令并提供可编辑功能所挂接到的事件-最终单元编辑等。我为ui-grid编写了原始的下拉编辑器,这有点儿摆弄。包含它的提交在这里:https://github.com/angular-ui/ng-grid/pull/1561,它将给出使它起作用所需的点点滴滴的一些想法。 (在可编辑教程中对此有所提及)。

关于javascript - 在angularjs UI网格列中选择下拉列表不适用于外部editcellTemplate,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29429482/

10-10 00:50
查看更多