Tengo en mi página .html una lista desplegable,
Desplegable:
<select ng-model="blisterPackTemplateSelected" data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates">
<option value="">Select Account</option>
</select>
Quiero ejecutar una acción cuando el usuario seleccione un valor. Entonces en mi controlador hice:
Controlador:
$scope.$watch('blisterPackTemplateSelected', function() {
alert('changed');
console.log($scope.blisterPackTemplateSelected);
});
Pero cambiar el valor en la lista desplegable no activa el código: $scope.$watch('blisterPackTemplateSelected', function()
Como resultado, probé otro método con: ng_change = 'changedValue()'
en la etiqueta de selección
y
Función:
$scope.changedValue = function() {
console.log($scope.blisterPackTemplateSelected);
}
Pero blisterPackTemplateSelected
se almacena en un ámbito secundario. Leí que el padre no puede acceder al alcance del niño.
¿Cuál es la forma correcta / mejor de ejecutar algo cuando cambia un valor seleccionado en una lista desplegable? Si es el método 1, ¿qué estoy haciendo mal con mi código?
fuente
Puede que sea tarde para esto, pero yo tenía un poco el mismo problema.
Necesitaba pasar tanto la identificación como el nombre en mi modelo, pero todas las soluciones ortodoxas me hicieron hacer un código en el controlador para manejar el cambio.
Me abrí camino con un filtro.
El "truco" está aquí:
Estoy usando el filtro incorporado para recuperar el nombre correcto de la identificación
Aquí hay un plunkr con una demostración funcional.
fuente
Por favor, use la
ngChange
directiva for it . Por ejemplo:Y pase el valor de su nuevo modelo en el controlador como parámetro:
fuente
La mejor práctica es crear un objeto (siempre use a. In ng-model)
En tu controlador:
y en tu plantilla:
Ahora solo puedes mirar
o puede usar la directiva ng-change así:
El video de egghead.io "The Dot" tiene una muy buena descripción, al igual que esta muy popular pregunta de desbordamiento de pila: ¿Cuáles son los matices de la herencia prototípica / prototípica de alcance en AngularJS?
fuente
Puede pasar el valor del modelo ng a través de la función ng-change como parámetro:
Es un poco difícil conocer su escenario sin verlo, pero esto debería funcionar.
fuente
Puedes hacer algo como esto
en lugar de agregar la opción, debe usar data-ng-options. He usado la opción Agregar para fines de prueba
fuente
Llego tarde aquí, pero resolví el mismo tipo de problema de esta manera que es simple y fácil.
y la función para ng-change es la siguiente;
fuente
Obtendrá el valor y el texto de la opción seleccionada de la lista / matriz utilizando el filtro.
editobj.FlagName = (EmployeeStatus | filtro: {Valor: editobj.Flag}) [0] .KeyName
fuente
Tuve el mismo problema y encontré una solución única. Esta no es la mejor práctica, pero puede resultar simple / útil para alguien. Simplemente use jquery en la identificación o clase o su etiqueta de selección y luego tendrá acceso tanto al texto como al valor en la función de cambio. En mi caso, estoy pasando valores de opción a través de sails / ejs:
Luego, en mi controlador Angular, mi función ng-change se ve así:
fuente
He probado algunas soluciones, pero aquí hay un fragmento de producción básico. Preste atención a la salida de la consola durante el control de calidad de este fragmento.
Margen :
Código:
Explicación: el punto importante aquí es la verificación nula del valor cambiado, es decir, si el valor es 'indefinido' o 'nulo' deberíamos manejar esta situación.
fuente