Obtener texto de la opción seleccionada

grunk

Tengo un formulario con algunos <select>enlazados a un objeto que proviene de un servicio web:

<select [(ngModel)]="configDatas.type" name="type" id="type">
        <option value="0">Disabled</option>
        <option value="1">Day</option>
        <option value="2">Week</option>
</select>

<select [(ngModel)]="configDatas.days" name="days" id="days">
        <option value="0">Monday</option>
        <option value="1">Tuesday</option>
        <option value="2">Wednesday</option>
</select>

Todo funciona como se esperaba en este lado.

Necesito agregar al final de mi formulario una oración que es un resumen de la elección de los usuarios. Algo como :

<span> You selected type {{configDatas.type}} with day {{configDatas.days}}</span>

pero en lugar del valor estoy buscando el texto de la opción. Me gustaría ver algo como:

Seleccionaste el tipo Semana con día Lunes

¿Es esto posible directamente en la plantilla sin utilizar ningún tipo de conversión en el lado del componente?

chanoto89

Actualizado : puede usar el evento de cambio para realizar un seguimiento de la opción recién seleccionada:

<select [(ngModel)]="configDatas.type" name="type" id="type" #type (change)="updateType(type.options[type.value].text)">
    <option value="0">Disabled</option>
    <option value="1">Day</option>
    <option value="2">Week</option>
</select>

<select [(ngModel)]="configDatas.days" name="days" id="days" #days (change)="updateDay(days.options[days.value].text)">
        <option value="0">Monday</option>
        <option value="1">Tuesday</option>
        <option value="2">Wednesday</option>
</select>

<span> You selected type {{selectedType}} with day {{selectedDay}}</span>



export class App {
  configDatas: any;
  selectedType: string;
  selectedDay: string;

  constructor() {
    this.configDatas = {
      'type': '', 
      'days': ''
    };
  }

  updateType(text: string) {
    this.selectedType = text;
  }

  updateDay(text: string) {
    this.selectedDay = text;
  }
}

Ejemplo actualizado http://plnkr.co/edit/ay7lgZh0SyebD6WzAerf

Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.

En caso de infracción, por favor [email protected] Eliminar

Editado en
0

Déjame decir algunas palabras

0Comentarios
Iniciar sesiónRevisión de participación posterior

Artículos relacionados

Obtener la opción seleccionada de la lista desplegable en el cuadro de texto

Obtener el texto de la opción seleccionada de SELECT usando JQuery

Obtener el texto de la opción seleccionada usando reaccion js?

¿Cómo obtener el texto de la opción seleccionada usando vuejs?

¿Cómo obtener la opción de texto seleccionada con Selenium usando Python?

jQuery: obtener un atributo personalizado de la opción seleccionada

Obtener atributo data- * de la <opción> seleccionada

jQuery: obtener un atributo personalizado de la opción seleccionada

Obtener valores de la opción seleccionada en AngularJS

Recuperar texto (no valor) de la etiqueta de opción seleccionada

Recuperar texto (no valor) de la etiqueta de opción seleccionada

Obtenga el texto de la opción seleccionada con JavaScript

Obtenga texto de la opción seleccionada con jQuery

Obtener la opción de cuadro de selección antes de la opción seleccionada actualmente

Obtener la opción seleccionada por valor

No se puede obtener el texto de la etiqueta de la etiqueta de selección seleccionada

Reemplazar el texto predeterminado de bootstrap downdrop con el texto de la opción seleccionada

Obtener atributo personalizado de la opción seleccionada de la lista de datos

¿Cómo puedo obtener la identificación de la opción seleccionada en rieles?

cómo obtener la identificación de la opción seleccionada en jquery

Cómo obtener la identificación de la opción seleccionada en react js

Obtener la etiqueta de texto de QAction seleccionada de QActionGroup

Obtener el ID de la opción seleccionada de la lista completa

Obtener el valor de la opción seleccionada sin devolución de datos / enviar PHP

¿Cómo obtener la opción seleccionada de la etiqueta "seleccionar" en el navegador móvil?

Django 3.0: no se puede obtener valor en vista de la opción seleccionada en la plantilla

Obtener la opción seleccionada en el formulario de edición en laravel

Cómo obtener el índice de la opción seleccionada en el cuadro combinado de Tkinter

¿Cómo obtener el atributo de la opción seleccionada de seleccionar en jQuery?

TOP Lista

CalienteEtiquetas

Archivo