UI-Grid v3.1.1 dropdownEditor 过滤器绑定答案

【问题标题】：UI-Grid v3.1.1 dropdownEditor filter bindingUI-Grid v3.1.1 dropdownEditor 过滤器绑定
【发布时间】：2016-09-17 00:58:12
【问题描述】：

我正在尝试在 UI-Grid 中创建自定义下拉编辑器。我已经关注了 Brian Hahn 的博客文章。

This one

除了我无法确定在 gridOptions 中定义的 cellFilter 的绑定之外，我大部分时间都在工作，我想在每一列的 colDef 中专门采用一个。

例如代码：

<ui-select-wrap>
    <ui-select ng-model="MODEL_COL_FIELD" ng-disabled="disabled" append-to-body="true" autofocus="true">
        <ui-select-match placeholder="Choose...">{{ MODEL_COL_FIELD | filter: col.cellFilter}}</ui-select-match>
        <ui-select-choices
                repeat="item[editDropdownIdLabel] as item in editDropdownOptionsArray | filter: $select.search">
            <span>{{ item[editDropdownValueLabel] }}</span>
        </ui-select-choices>
    </ui-select>
</ui-select-wrap>

由于某种原因，当我尝试从 col.cellFilter 调用它时，它没有调用过滤器。我希望像 MODEL_COL_FIELD 一样有一些我可以参考的绑定，但我似乎找不到它。

编辑：添加了我的网格选项。

vm.gridOptions = {
    showGridFooter: true,
    rowHeight: 40,
    enableCellEditOnFocus: true
};

vm.gridOptions.columnDefs = [
    {name: 'id', enableCellEdit: false},
    {name: 'name', displayName: 'Name (editable)'},
    {name: 'age', displayName: 'Age', type: 'number'},
    {
        name: 'list',
        displayName: 'List',
        editableCellTemplate: 'app/index/templates/uiSelect.tpl.html',
        cellFilter: 'listFilter',
        enableCellEditOnFocus: true
    },
    {
        name: 'checkbox',
        displayName: 'Checkbox',
        type: 'boolean',
        cellTemplate: '<input type="checkbox" ng-model="MODEL_COL_FIELD">'
    }
];

我的自定义下拉列表中似乎没有应用 cellFilter。我已尝试使用模板中显示的 CUSTOM_FILTERS。

<ui-select-match placeholder="Choose...">{{ COL_FIELD CUSTOM_FILTERS }}</ui-select-match>

即使我在检查 CUSTOM_FILTERS 变量时在 gridOption columnDefs 中定义了 cellFilters，但它返回为未定义。

【问题讨论】：

标签： angularjs angular-ui-grid

【解决方案1】：

您可以像这样将cellFilter 传递给gridOptions，而不是引用下拉模板中的单元格过滤器-
来自 Brian Hann 页面上的示例

$scope.gridOptions = {
    rowHeight: 38,
    columnDefs: [
      { name: 'name' },
      { name: 'age', type: 'number' },
      {
        name: 'gender',
        editableCellTemplate: 'uiSelect.html',
        editDropdownOptionsArray: [
          'male',
          'female',
          'other'
        ],
        cellFilter : 'customFilterName'
      }
    ]
  };

【讨论】：