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

Javascript 在angularjs UI网格列中选择不适用于外部editcellTemplate的下拉列表,javascript,angularjs,angular-ui-grid,Javascript,Angularjs,Angular Ui Grid,我在angularJS UI网格的一列中创建了一个下拉列表。事实上,我采用了与UI grid tutorial.ref中相同的示例: . 在这里,我修改了editableCelltemplate以应用我自己的模板(partial.html)。当我更改下拉值时,它不会被捕获。 app.js var-app=angular.module('app',['ngTouch','ui.grid','ui.grid.edit','addressFormatter']); angular.module('

我在angularJS UI网格的一列中创建了一个下拉列表。事实上,我采用了与UI grid tutorial.ref中相同的示例: . 在这里,我修改了editableCelltemplate以应用我自己的模板(partial.html)。当我更改下拉值时,它不会被捕获。 app.js

var-app=angular.module('app',['ngTouch','ui.grid','ui.grid.edit','addressFormatter']);
angular.module('addressFormatter',[]).filter('address',function(){
返回函数(输入){
返回input.street+'、'+input.city+'、'+input.state+'、'+input.zip;
};
});
app.controller('MainCtrl',['$scope','$http',函数($scope,$http){
$scope.gridOptions={};
$scope.editDropdownOptionsArrayValue=[{id:1,性别:'male'},
{id:1,性别:'male'}
];
$scope.gridOptions.columnDefs=[
{name:'id',enableCellEdit:false,width:'10%},
{name:'name',displayName:'name(可编辑)”,宽度:'20%},
{name:'age',displayName:'age',type:'number',width:'10%},
{name:'gender',displayName:'gender',editableCellTemplate:'partial.html',width:'20%,
cellFilter:'mapGender',editDropdownValueLabel:'gender',EditDropDownOptionArray:$scope.EditDropDownOptionArrayValue},
{name:'registered',displayName:'registered',type:'date',cellFilter:'date:'yyyyy-MM-dd',width:'20%},
{name:'address',displayName:'address',type:'object',cellFilter:'address',width:'30%},
{name:'address.city',displayName:'address(偶数行可编辑)”,width:'20%,
cellEditableCondition:函数($scope){
返回$scope.rowRenderIndex%2
}
},
{name:'isActive',displayName:'Active',type:'boolean',width:'10%},
{name:'pet',displayName:'pet',width:'20%',editableCellTemplate:'ui grid/dropdownEditor',
EditDropDownRowEntityOptionArrayPath:'foo.bar[0].options',editDropdownIdLabel:'value'
}
];
$scope.msg={};
$scope.gridOptions.onRegisterApi=函数(gridApi){
//在作用域上设置gridApi
$scope.gridApi=gridApi;
gridApi.edit.on.afterCellEdit($scope,function(rowEntity,colDef,newValue,oldValue){
$scope.msg.lastCellEdited='edited row id:'+rowdentity.id+'列:'+colDef.name+'newValue:'+newValue+'oldValue:'+oldValue;
$scope.$apply();
});
};
$http.get('/data/500_complex.json')
.成功(功能(数据){
对于(i=0;i
.grid{
宽度:600px;
高度:450px;
}

选择

为了拥有一个自定义编辑器,您需要编写一个指令,并提供可编辑功能所钩住的事件-结束单元格编辑等。我为ui网格编写了最初的下拉编辑器,这有点费劲。包括它的commit在这里:,它将给出一些使它工作所需的细节。(可编辑教程中提到了这一点)