using ng-option to display dropdown values

Question

In my application, I have been using options for the scroll down menu. In place of this, I want to use ng-option such that the values come from javascript file. I even need help with angular js code for this. Here is my HTML code with options values. I need some help.

<div class="form-group">
    <label class="control-label col-lg-2 pull-left">Quality<span class="Imp">*</span></label>
    <div class="col-lg-8">
        <select id="Quality" name="Quality" class="form-control" style="width:170px" ng-model="vm.EditRef_UI.Quality"
            tooltip="Quality is required" tooltip-placement="top" required>

            <option selected value="Satisfactory">Satisfactory</option>
            <option value="NotSatisfactory">Not Satisfactory</option>
        </select>
    </div>
</div>

Abdullah Al Noman · Accepted Answer · 2017-03-15 03:13:19Z

5

 <select ng-options="category.value as category.name for category in sourceValues"  ng-model="Quality"></select>

1st input category.value will be the value of option and category.name would be the value shown on the drop-down list

In the controller define a array with option and their value that you want to use

$scope.sourceValues = [
       {value: 'Satisfactory', name: 'Satisfactory'},
       {value: 'NotSatisfactory', name: 'Not satisfactory'}

      ];

edited Mar 15, 2017 at 3:13

answered Mar 15, 2017 at 3:09

Abdullah Al Noman

2,8884 gold badges22 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

beginner Over a year ago

Thanks for your answer :) Actually I am facing issue with ng-option and angular code for it. I am unable to know how to use these in my solution.

Abdullah Al Noman Over a year ago

no problem brother .. its time to give back to the community :)

Kamal · Accepted Answer · 2017-03-15 01:07:28Z

1

Based on the documentation you could do the following.

<select ng-options="item as item.label for item in qualities track by item.id" ng-model="Quality"></select>

answered Mar 15, 2017 at 1:07

Kamal

1615 bronze badges

Comments

Cristian Colorado · Accepted Answer · 2017-03-15 01:17:40Z

1

For instance if you have populated your quality options into a scope variable 'qualities':

$scope.qualities = [{id: 1, label: 'Low Quality'}, {id: 2, label: 'Medium Quality'}, {id: 3, label: 'High Quality'}];

You can update your html like:

<div class="form-group">
      <label class="control-label col-lg-2 pull-left">Quality<span class="Imp">*</span></label>
          <div class="col-lg-8">
               <select id="Quality" name="Quality" class="form-control" style="width:170px" ng-options="item as item.label for item in qualities track by item.id" ng-model="vm.EditRef_UI.Quality"  tooltip="Quality is required"                                                                    tooltip-placement="top" required>
                </select>
           </div>

You would need to use attribute ng-options like this:

ng-options="item as item.label for item in qualities track by item.id"

Your selection will still be updated on scope variable vm.EditRef_UI.Quality.

answered Mar 15, 2017 at 1:17

Cristian Colorado

2,0403 gold badges19 silver badges24 bronze badges

4 Comments

beginner Over a year ago

Thanks a lot for your answer. As I am very new to angular js. Where should I place $scope.qualities in my js file?

Cristian Colorado Over a year ago

You should place it on your controller js.

Cristian Colorado Over a year ago

No, in this case item will be bound to the selection model. Meaning that vm.EditRef_UI.Quality will be assigned with {id: 1, label: '...'}. If you want the id to be bound you should use "item.id as item.label for item in quantities track by item.id".

beginner Over a year ago

Thanks a lot.. You answer helped me a lot :)

Collectives™ on Stack Overflow

using ng-option to display dropdown values

3 Answers 3

2 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related