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

Question

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

除了我无法弄清楚 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，但它返回时未定义。

Answer 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'
      }
    ]
  };

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

UI-Grid v3.1.1 dropdownEditor filter binding

angularjs

angular-ui-grid