CODEWITHSUNDEEP
javascriptangularjsangularjs-scope
Chinmay235
Chinmay235

Reputation: 3414

How to customize dropdown in AngulrJS?

I have faced some problem in AngularJS dropdown text. Please check below my code

JS

$scope.work_type_list = {
    model: null,
    availableOptions: [
      {id: '1', name: 'Print Ready File', symbol: 'P'},
      {id: '2', name: 'Design Work', symbol: 'D'},
      {id: '3', name: 'Design Only', symbol: 'DO'}
    ]
};

My HTML

<select class="form-control m-b" name="work_type" ng-model="formData.work_type" ng-options="option.id as option.name for option in work_type_list.availableOptions">
   <option value="">Select Work Type</option>
</select>

My current output is - 

<select ng-options="option.id as option.name for option in work_type_list.availableOptions" ng-model="formData.work_type" name="work_type" class="form-control m-b ng-pristine ng-valid ng-empty ng-touched">
  <option value="" class="" selected="selected">Select Work Type</option>
  <option label="Print Ready File" value="string:1">Print Ready File</option>
  <option label="Design Work" value="string:2">Design Work</option>
  <option label="Design Only" value="string:3">Design Only</option>
</select>

I want to add P, D and DO of my options text. Here my output should be like this - 

<select ng-options="option.id as option.name for option in work_type_list.availableOptions" ng-model="formData.work_type" name="work_type" class="form-control m-b ng-pristine ng-valid ng-empty ng-touched">
  <option value="" class="" selected="selected">Select Work Type</option>
  <option label="Print Ready File" value="string:1">Print Ready File(P)</option>
  <option label="Design Work" value="string:2">Design Work(D)</option>
  <option label="Design Only" value="string:3">Design Only(DO)</option>
</select>

How to customize dropdown option text?

Upvotes: 3

Views: 50

Answers (1)

Nikos Paraskevopoulos
Nikos Paraskevopoulos

Reputation: 40298

You can use expressions in the various parts of ng-options:

<select class="form-control m-b" name="work_type" ng-model="formData.work_type"
    ng-options="option.id as (option.name + '(' + option.symbol + ')') for option in work_type_list.availableOptions">
    <option value="">Select Work Type</option>
</select>

Upvotes: 5

Related Questions