我在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/