Obtener valor cuando la opción ng-opción cambia

Tengo en mi página .html una lista desplegable,

Desplegable:

 Select Account  

Quiero ejecutar una acción cuando el usuario selecciona un valor. Entonces en mi controlador lo hice:

Controlador:

 $scope.$watch('blisterPackTemplateSelected', function() { alert('changed'); console.log($scope.blisterPackTemplateSelected); }); 

Pero el cambio del valor en la lista desplegable no desencadena el código: $scope.$watch('blisterPackTemplateSelected', function()

Como resultado, probé otro método con un: 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 los padres no pueden acceder al scope del niño.

¿Cuál es la mejor / mejor forma 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?

como dijo Artyom, necesitas usar ngChange y pasar el objeto ngModel como argumento a tu función ngChange

Ejemplo :

 
{{itemList}}

js:

 function ctrl($scope) { $scope.itemList = []; $scope.blisterPackTemplates = [{id:1,name:"a"},{id:2,name:"b"},{id:3,name:"c"}]; $scope.changedValue = function(item) { $scope.itemList.push(item.name); } } 

Ejemplo en vivo: http://jsfiddle.net/choroshin/9w5XT/4/

Puede que llegue tarde, pero tuve el mismo problema.

Necesitaba pasar tanto la identificación como el nombre en mi modelo, pero todas las soluciones ortodoxas me hicieron crear código en el controlador para manejar el cambio.

Logré salir de él usando un filtro.

   

El “truco” está aquí:

 ng-change="selected_name=(options|filter:{id:selected_id})[0].name" 

Estoy usando el filtro incorporado para recuperar el nombre correcto para la identificación

Aquí hay un plunkr con una demostración funcional.

Por favor, use para ello la directiva ngChange . Por ejemplo:

  

Y pase su nuevo valor de modelo en el controlador como un parámetro:

 ng-change="changeValue(blisterPackTemplateSelected)" 

La mejor práctica es crear un objeto (siempre use a. En ng-model)

En tu controlador:

 var myObj: { ngModelValue: null }; 

y en tu plantilla:

  

Ahora solo puedes mirar

 myObj.ngModelValue 

o puede usar la directiva ng-change de la siguiente manera:

  

El video egghead.io “The Dot” tiene una muy buena visión general, al igual que esta muy popular pregunta de desbordamiento de stack: ¿Cuáles son los matices del scope prototípico / herencia prototípica en AngularJS?

Puede pasar el valor de ng-model 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.

Puedes hacer algo como esto

    

en lugar de agregar la opción, debe usar data-ng-options. He utilizado la opción Agregar para fines de prueba

Llegué tarde 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;

  $scope.selectedBlisterPack= function (value) { console.log($scope.blisterPackTemplateSelected); }; 

Obtendrá el valor y el texto de la opción seleccionada de list / array utilizando filter.
editobj.FlagName = (EmployeeStatus | filter: {Value: editobj.Flag}) [0] .KeyName

  

Tuve el mismo problema y encontré una solución única. Esta no es la mejor práctica, pero puede ser 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 velas / ejs:

   

Luego, en mi controlador angular, mi función ng-change se ve así:

  $scope.projectChange = function($scope) { $scope.project.title=$("#projectSelector option:selected").text(); }; 

He intentado algunas soluciones, pero aquí hay un fragmento de producción básico. Por favor, preste atención a la salida de la consola durante la garantía de calidad de este fragmento.

Margen :

     Angular Select snippet     
{{selBrand.name}}{{delimiter}}{{selBrand.price}}{{currency}}

Código:

 var c = console; var d = document; var app = angular.module('appUp',[]).controller('upController',function($scope){ $scope.stock = [{ name:"Adidas", price:420 }, { name:"Nike", price:327 }, { name:"Clark", price:725 } ];//data $scope.Changer = function(){ if($scope.selBrand){ c.log("brand:"+$scope.selBrand.name+",price:"+$scope.selBrand.price); $scope.currency = "$"; $scope.delimiter = ":"; } else{ $scope.currency = ""; $scope.delimiter = ""; c.clear(); } }; // onchange handler }); 

Explicación: el punto importante aquí es la verificación nula del valor modificado, es decir, si el valor es ‘indefinido’ o ‘nulo’ deberíamos manejar esta situación.