如何自動填充 AngularJs 中的下拉列表？

Question

我需要制作一個表單，其中我有一個字段是性別作為下拉列表我已經有一些數據我需要自動 select 我的下拉值基於我從 api 獲得的數據。

這是我的代碼->

<label for="particle1" class="font-weight-bold">Gender : <span class="text-danger">*</span></label>
<select class="form-control" ng-model="patient.gender" ng-init="patient.gender" ng-change="selectGender(patient.gender)">
 <option value="Male">Male</option>
 <option value="Female">Female</option>
 <option value="Others">Others</option>
 </select>

 $scope.patient={
  "firstName" : $scope.patientData.account.firstName,
  "lastName" : $scope.patientData.account.lastName,
  "dob":$scope.patientData.birthDate,
  "gender":$scope.patientData.gender,
   };

$scope.selectGender=(e)=>{
     console.log("Gender",e);
      $scope.patient.gender=e;
   }

但是，這適用於普通輸入文本字段，但不適用於下拉列表。 我也想問一下，這樣是不是通過新建function來獲取性別的正確方法？ 我們可以優化它，這樣函數的數量就會減少嗎？我該如何解決這個問題？ 請幫忙

Answer 1

這是一個例子。 您可以使用ng-options來填充 select 菜單，每當您需要手動分配一個值時，只需設置您在ng-model中使用的 object 即可。 為了模擬 API 體驗，我在設置值之前設置了 1.5 秒的超時。

 angular.module('myApp', []).controller('myCtrl', ['$scope', '$timeout', function($scope, $timeout) { $scope.patient = {} $scope.genders = [{ key: "Male", value: "Male" }, { key: "Female", value: "Female" }, { key: "Others", value: "Others" }] $timeout(function() { $scope.patient.gender = "Female"; }, 1500); }]);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <label for="particle1" class="font-weight-bold">Gender: <span class="text-danger">*</span></label> <select class="form-control" ng-model="patient.gender" ng-options='option.key as option.value for option in genders'> <option></option> </select> <p> Selected gender is: {{patient.gender}}</p> </div>