从单元格模板中搜索文本在 ui-grid 中不起作用

Question

我已经为其中一列定义了条件单元格模板。它可以正确显示数据，但我无法在单元格模板中搜索文本。这是我的笨蛋： https://plnkr.co/edit/TDX5jtPord1hkzCVaw3L?p=preview

var template1 = '<div class="">' + 
'<div class="" ng-if="COL_FIELD > 30">Greater </div> ' +
'<div class="" ng-if="COL_FIELD < 30"> Lesser </div> ' +
'</div>';

在模板中我设置了条件...如果 COL_FIELD > 30 则写 Greater.. 否则写 Lesser。现在我应该可以在数字列中搜索更大或更小了。

Answer 1

一种解决方案是在您的数据上添加属性，例如：

$http.get('data.json').success(function(data) {
    data.map(function(item) {
        item.greaterLesser = item.amount > 30 ? 'Greater' : 'Lesser';
    });
    $scope.gridOptions.data = data;
});

然后不使用模板金额，只需绑定此属性。

$scope.gridOptions = {
    enableFiltering: true,
    columnDefs: [{
      field: 'name',
      width: 70
    }, {
      field: 'greaterLesser',
      name: 'Number',
      width: 90,
    }, {
      field: 'amount',
      name: 'Currency',
      cellFilter: 'currencyFilter:this',
    }]
};

这是updated plunker

编辑

如果要使用模板，可以自己实现搜索功能。您可以将 filter 选项添加到您的字段并实现 condition 功能。类似于：

filter: {
    condition: function(searchTerm, cellValue) {
        var value = cellValue > 30 ? 'greater' : 'lesser';
        var result = value.search(searchTerm.toLowerCase());
        return result > -1;
    }
}

我在这里使用了 search 函数，但您可以使用 match 或其他一些函数。这是一个demo plunker

Answer 2

我使用下面的代码来进行搜索

field: 'EmpId', 
displayName: 'Employee Type', 
cellTemplate: '<div style="cursor:pointer"  class="ui-grid-cell-contents">{{grid.appScope.GetEmployeeType(row)}}</div>', 
filter: {
            condition: function (searchTerm, cellValue,row,column) {
            var value = $scope.GetEmployeeType(row);//same function that you use to display value in cell Template
            return (value.toLocaleLowerCase().indexOf(searchTerm.toLocaleLowerCase())>-1);
                            }
                        }

从单元格模板中搜索文本在 ui-grid 中不起作用

Search text from cell template not working in ui-grid

celltemplate

angularjs

angular-ui-grid