CODEWITHSUNDEEP
angularjs
Vimal
Vimal

Reputation: 2857

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

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

Upvotes: 8

Views: 10861

Answers (2)

Tania Scortegagna
Tania Scortegagna

Reputation: 1

This works for me:

    <div class="form-group">
        <label for="vehicle">Vehiculo:</label>
        <select ng-model="journeyEdit.vehicle" class="form-control" ng-options="vehicle as vehicle.Descripcion + ' - ' + vehicle.Patente for vehicle in vehicles track by vehicle.Id"  required>
            <option value="">Seleccione una opcion</option>
        </select> 
    </div>

Upvotes: 0

nweg
nweg

Reputation: 2865

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.

Upvotes: 18

Related Questions