populate a select with ng-grid columns

Question

I've got an ng-grid that I want to be able to search on particular columns. The user enters some text and chooses a column from a dropdown. My UX guy doesn't much fancy the search-field-in-every-column-header that ng-grid supports.

Here is my Plunker: http://plnkr.co/edit/WofBDA6QQkCDcwDMznzf?p=preview

(I haven't bothered with the text field yet, just worried about the field picker so far)

I've got a method that grabs the field and displayName for each field and populates my select with options, but for some reason, it gives me an empty first option. I don't want an empty one - and certainly not if it's going to look like this:

<option value="? undefined:undefined ?"></option>

I want it to default to a field of my choice (in the plunker example, I want it to default to 'age')

I can't figure out why I'm getting an undefined option - unless it's because the control is being rendered by my getFilterFields() function BEFORE the colDefs are fully defined. I've tried various ways of delaying the getFilterFields()function - I played with init: gridInit parameter, but so far, no joy.

How can I assure that 1] my dropdown contains ONLY valid columns, and 2] one of them is preselected?

New Dev New Dev · Accepted Answer · 2015-01-23T23:24:56

It's better to use ng-options and set the model to the option that you want to be selected.

<select ng-model="selectedItem"
        ng-options="item.value as item.name for item in filterOptions.filterFields">
</select>

and in the controller, set:

$scope.selectedItem = "age"; // equal to the value of the default option

populate a select with ng-grid columns

1 Answers