Necesito crear un formulario en el que tenga un campo que sea Género como menú desplegable. Ya tengo algunos datos que necesito para seleccionar automáticamente mi valor desplegable en función de los datos que obtengo de la API.
Aquí está mi código ->
<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; }Sin embargo, esto funciona para los campos de texto de entrada normales, pero no funciona con el menú desplegable. ¡También quiero preguntar si esta es la forma correcta de obtener el género al hacer una nueva función! ¿Podemos optimizarlo para que haya menos funciones? ¿Cómo puedo puntear esto? por favor ayuda
Aquí hay un ejemplo. Puede usar ng-options para completar su menú de selección y cada vez que necesite asignar manualmente un valor, simplemente configure el objeto que está usando en ng-model . Para simular la experiencia de la API, establezco un tiempo de espera de 1,5 segundos antes de que establezca el valor.
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>