djpcoc djpcoc - 1 month ago 12
AngularJS Question

Custom filtering / ordering with ng-table and selectize

One of my ng-table columns contains a selectize dropdown. The value of this column is a foreign key for another table. Instead of displaying this key, I wish to display another attribute (name) of the row this key represents.
My data is in an array called table.

I have the dropdown displaying correctly using another array, fkTable.

<selectize ng-model="row[col.name]"
options='fkTable'
config='fkConfig'">


where fkConfig:

$scope.fkConfig = {
maxItems: 1,
valueField: 'id',
labelField: 'name',
searchField: 'name'
};


Now I want to be able to filter and order this column based on the foreign rows name, not id.

I attempted to go about this mapping the ids to their names:

$scope.foreignRowNames = {
0:"not grouped"
1:"Google"
14:"Youtube"
}


and by creating a custom filter for this specific column:

function filterSelectizeColumn(table, searchTerm) {
for (var i = 0; i < table.length; i++) {
var fkValue = table[i].fk;
var foreignRowName = $scope.foreignRowNames[fkValue]];

if (foreignRowName.indexOf(searchTerm) == -1) {
table = table.splice(i, 1);
}
}
}


But this seems an awkward and inefficient way of going about something I would have thought to be a somewhat common problem due to the popularity of the two libraries.

My question is how can I efficiently create a custom filter for this foreign key column.

Answer

The solution I went with:

  • replace all foreign keys with their corresponding name
  • when making edits, convert names back to the keys they represent