使用 ng-option 顯示下拉值

Question

在我的應用程序中，我一直在使用向下滾動菜單的選項。 取而代之的是，我想使用 ng-option 使值來自 javascript 文件。 我什至需要有關 angular js 代碼的幫助。 這是我的帶有選項值的 HTML 代碼。 我需要幫助。

<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>

Answer 1

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

第一個輸入category.value將是選項的值， category.name將是下拉列表中顯示的值

在控制器中定義一個帶有選項的數組及其要使用的值

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

      ];

Answer 2

根據文檔，您可以執行以下操作。

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

Answer 3

例如，如果您已將質量選項填充到范圍變量“質量”中：

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

您可以像這樣更新您的 html：

<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>

您需要像這樣使用屬性 ng-options：

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

您的選擇仍將在范圍變量 vm.EditRef_UI.Quality 上更新。