Angular ui-grid - выбор DropDown показывает идентификатор

objCombos = $scope.getComboValues('DEPARTMENT');

$scope.gridOptions.columnDefs.push({
field: fieldName.toUpperCase(), displayName: displayName,
columnType: 'columnDb',
editableCellTemplate: 'ui-grid/dropdownEditor',
editDropdownValueLabel: 'DEPARTMENT',
editDropdownOptionsArray: objCombos,
name: fieldName.toUpperCase()
});

[
    { id: 1, department: 'Branch1' },
    { id: 2, department: 'Branch2' }
];

Ответ 1 · рейтинг 5 · Trevedhek

Установка editDropdownIdLabel в соответствии с editDropdownValueLabel подходит для случаев, когда идентификатор на самом деле не нужен. То есть ваша базовая структура данных хранит строки ("Branch1", "Branch2"), а не целые числа (1,2).

Если это не так, используйте настраиваемый фильтр. Недавно у меня была ситуация, когда дни недели сохранялись в бэкенде как целые числа (1-7), но пользователь ожидал увидеть в сетке строку полного имени. Ниже мое решение, модифицированное для этого примера:

angular.module('myApp').filter("branchFilter", function() {
    var vals = ["Branch1", "Branch2"];
    return function(id) {
        var i = id-1, ret = "?";
        if(i>=0 && i< vals.length) {
            ret = vals[i];
        }
        return ret;
    };
});

Затем в столбце Defs добавьте cellFilter: 'branchFilter'.

При этом раздражает то, что ui-grid предполагает, что вам нужно различать id и value в раскрывающемся списке, но затем отображает идентификатор, за исключением случаев редактирования. Трудно представить себе случай, когда такое поведение было бы полезно пользователю.

Я заметил, что у вас есть комбо-значения, хранящиеся в отдельном массиве. Вот подход, который повторно использует эту структуру. Во-первых, поместите комбинированные значения туда, где они могут быть доступны в вашем приложении:

angular.module('myApp').value('ComboValues', {
    branches: [
        {id:1, value:"Branch1"},
        {id:2, value:"Branch2"},
        ...
    ]
});

А затем сообщите пользовательскому фильтру, как использовать значения:

angular.module('myApp').filter("comboFilter", function(ComboValues) {
    return function(id, comboName, idName, valName) {
        idName = idName || "id";      //optional - defaults to 'id'
        valName = valName || "value"; //optional - defaults to 'value'
        var opts = ComboValues[comboName];
        if(angular.isArray(opts)) {
            var ret = id; //default return value if no match found
            opts.some(function(opt) {  //look for matching option
                if(opt[idName]===id) {
                    ret = opt[valName];
                    return true; //break
                }//else keep looking
            });
            return ret;
        } else {
            return comboName+ " not an array";
        }
    };
});

Затем в столбце Defs используйте: cellFilter: "comboFilter:'branch':'id':'value'" или, если значения по умолчанию в порядке: cellFilter: "comboFilter:'branch'"

Обратите внимание, что в этом примере параметры нуждаются в дополнительных кавычках, поэтому фильтр обрабатывает их как строки, а не как переменные области. То есть: "comboFilter:'branch'" не "comboFilter:branch".

editDropdownIdLabel: 'DEPARTMENT',