Custom filtering / ordering with ng-table and selectize

Question

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 1

The solution I went with:

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