How to display two values using ng-options in AngularJs?

Question

I have a drop down filter and it is working fine. See the link
http://plnkr.co/edit/c5Hrqfv1eA5qfQpkYR41?p=preview
But I want to add one more value in to the drop down, then it is not working correctly. I have tried with the below code.

<select ng-model="filterDeck.deckDetail" ng-options="deck.name as (deck.name+' - '+deck.level) for deck in data">
</select>

Please help me to do this. Thank you.
Vimal

Answer 1

If you don't want to make any changes to the filter use this select:

<select ng-model="filterDeck.deckDetail" ng-options="deck as deck.name + ' - '  + deck.level for deck in data">

The above option will bind the entire object to the model.

If you just want to bind the id to the model you need to update your select and filter to the following :

<select ng-model="filterDeck.deckDetail" ng-options="deck.id as deck.name + ' - '  + deck.level for deck in data">

Then update your filter to this:

$scope.customDeck = function (data) {
    if (data.id === $scope.filterDeck.deckDetail) {
      return true;
    } else {
      return false;
    }
  };  

Either way will work.