Search code examples
javascripthtmlangularjsng-options

using ng-option to display dropdown values


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>

Solution

  •  <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'}
    
          ];