吴相结合电网和用户界面，选择2：无法选择一个值 [英] Combining ng-grid and ui-select2: unable to select a value
问题描述
在一个NG-网格的editableCellTemplate，我想用一种更人性化的下拉列表中，我发现用户界面，选择2是一个很好的一个。
In the editableCellTemplate of an ng-grid, I wanted to use a more user-friendly dropdown, and I found ui-select2 to be a good one.
问题是但是，此组件，当它的NG-网格内使用的任何点击，导致细胞巨明回不可编辑的模式。
The thing is however, that any click on this component, when it is used inside the ng-grid, results in the cell juming back to non-editable mode.
此方式使用鼠标（我可以用我的键盘上的箭头）。我无法选择其他值
This way I can't select another value using the mouse (I can using the arrows on my keyboard).
当我把下拉菜单中的cellTemplate，它的工作原理，但它也应该在工作*的编辑的* CellTemplate。
When I put the dropdown in the cellTemplate, it works, but it should also work in the *editable*CellTemplate.
有些code，看看我的意思是可以在这里找到。
Some code to see what I mean can be found here.
http://plnkr.co/edit/taPmlwLxZrF10jwwb1FX?p=$p$ PVIEW
有谁知道为什么出现这种情况，什么可以做，以解决它？
Does anyone know why that happens, and what could be done to work around it?
推荐答案
我更新了plunker与解决方案（显示在最后网格）。
I updated the plunker with the solution (last grid shown).
http://plnkr.co/edit/taPmlwLxZrF10jwwb1FX?p=$p$ PVIEW
我们的想法是，你应该跟NG-网格完全像其他editablCellTemplates做。这些规则没有得到很好的文档中定义的，而是通过看NG-网格的源$ C $ C的NG-输入指令，他们可以推断。
The idea is that you should 'talk to ng-grid' exactly like the other editablCellTemplates do. These 'rules' aren't well defined in the documentation, but they could be deduced by looking at ng-grid's source code for the ng-input directive.
基本上，你自己的组件应该由注重你的编辑器要素的 ngGridEventStartCellEdit 事件作出响应，而最重要的一点是：组件必须发出在 ngGridEventEndCellEdit 事件只有当细胞失去焦点的（或当你想编辑消失，譬如当pressing进入或东西）。
Basically, your own component should respond to the ngGridEventStartCellEdit event by focusing your editor element, and the most important thing is: your component MUST emit the ngGridEventEndCellEdit event only when the cell loses focus (or when you want the editor to disappear, like maybe when pressing enter or something).
因此，对于我创建了自己的指令，这种特定的情况下，增加了必要的行为，到UI，选择2元，但我想你能理解你必须为你自己的特定情况该怎么办。
So for this specific case I created my own directive that adds the necessary behaviour to a ui-select2 element, but I imagine you could understand what you'd have to do for your own specific case.
所以，作为一个例子，这里是我的用户界面，选择2特定指令：
So, as an example, here is my ui-select2 specific directive:
app.directive(
'uiSelect2EditableCellTemplate',
[
function() {
return {
restrict: "A",
link: function ( scope, elm, attrs ) {
//make sure the id is set, so we can focus the ui-select2 by ID later on (because its ID will be generated from our id if we have one)
elm.attr( "id", "input-" + scope.col.index + "-" + scope.row.rowIndex );
elm.on( 'click', function( evt ) {
evt.stopPropagation();
} );
elm.on( 'mousedown', function( evt ) {
evt.stopPropagation();
} );
//select2 has its own blur event !
elm.on( 'select2-blur',
function ( event ) {
scope.$emit( 'ngGridEventEndCellEdit' );
}
);
scope.$on( 'ngGridEventStartCellEdit', function () {
//Event is fired BEFORE the new elements are part of the DOM, so try to set the focus after a timeout
setTimeout( function () {
$( "#s2id_" + elm[0].id ).select2( 'open' );
}, 10 );
} );
}
};
}
]
);
和我自己的editableCellTemplate就得是这个样子：
and my own editableCellTemplate would have to look something like this:
$scope.cellTemplateDropdownUiSelect3 =
'<select ui-select2-editable-cell-template ui-select2 ng-model="COL_FIELD" style="width: 90%" >' +
'<option ng-repeat="(fkid, fkrow) in fkvalues_country" value="{{fkid}}" ng-selected="COL_FIELD == fkid" >{{fkrow}} ({{fkid}})</option>' +
'</select>' ;
的官方的一点点信息可以在这里找到：的 https://github.com/angular-ui/ng-grid/blob/master/CHANGELOG.md#editing-cells
这篇关于吴相结合电网和用户界面，选择2：无法选择一个值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
