Obteniendo el objeto ng seleccionado con ng-change

Dado el siguiente elemento de selección

  

¿Hay alguna manera de hacer que MAGIC_THING sea igual al tamaño seleccionado actualmente, así que tengo acceso a size.name y size.code en mi controlador?

size.code afecta a muchas otras partes de la aplicación (URL de imagen, etc.), pero cuando se actualiza el ng-model de item.size.code , item.size.name debe actualizarse también para el usuario cosas. Supongo que la forma correcta de hacerlo es capturar el evento de cambio y establecer los valores dentro de mi controlador, pero no estoy seguro de qué puedo pasar a la actualización para obtener los valores adecuados.

Si esta es una forma completamente incorrecta de hacerlo, me encantaría saber la forma correcta.

En lugar de establecer el modelo ng en item.size.code, ¿qué le parece establecerlo en el tamaño?

  

Luego, en su método update() , $scope.item se establecerá en el elemento seleccionado actualmente.

Y cualquiera que sea el código necesario item.size.code , puede obtener esa propiedad a través de $scope.item.code .

Fiddle .

Actualización basada en más información en los comentarios:

Utilice alguna otra propiedad de $ scope para su ng-model de selección y luego:

  

Controlador:

 $scope.update = function() { $scope.item.size.code = $scope.selectedItem.code // use $scope.selectedItem.code and $scope.selectedItem.name here // for other stuff ... } 

También puede obtener directamente el valor seleccionado usando el siguiente código

   

script.js

  $scope.selectedTemplate = function(pTemplate) { //Your logic alert('Template Url is : '+pTemplate); } 

también puedes probar esto:

  

Si la respuesta de Divyesh Rupawala no funciona (pasando el elemento actual como parámetro), entonces vea la función onChanged() en este Plunker. Está usando this :

http://plnkr.co/edit/B5TDQJ

  
 //Javascript $scope.update = function () { $scope.myItem; alert('Hello'); } 
  

Esto podría darte algunas ideas

Modelo de vista de .NET C #

 public class DepartmentViewModel { public int Id { get; set; } public string Name { get; set; } } 

.NET C # Web Api Controller

 public class DepartmentController : BaseApiController { [HttpGet] public HttpResponseMessage Get() { var sms = Ctx.Departments; var vms = new List(); foreach (var sm in sms) { var vm = new DepartmentViewModel() { Id = sm.Id, Name = sm.DepartmentName }; vms.Add(vm); } return Request.CreateResponse(HttpStatusCode.OK, vms); } } 

Controlador angular:

 $http.get('/api/department').then( function (response) { $scope.departments = response.data; }, function (response) { toaster.pop('error', "Error", "An unexpected error occurred."); } ); $http.get('/api/getTravelerInformation', { params: { id: $routeParams.userKey } }).then( function (response) { $scope.request = response.data; $scope.travelerDepartment = underscoreService.findWhere($scope.departments, { Id: $scope.request.TravelerDepartmentId }); }, function (response) { toaster.pop('error', "Error", "An unexpected error occurred."); } ); 

Plantilla angular:

 

El filtro de AngularJS funcionó para mí.

Suponiendo que el code/id es único , podemos filtrar ese objeto en particular con el filter de AngularJS y trabajar con las propiedades de los objetos seleccionados. Considerando el ejemplo de arriba:

   

{{size.name}}

Ahora, hay 3 aspectos importantes para esto :

  1. ng-init="search.code = item.size.code" – al inicializar el elemento h1 fuera del cuadro de select , configure la consulta de filtro a la opción seleccionada .

  2. ng-change="update(MAGIC_THING); search.code = item.size.code" – cuando cambia la entrada de selección, ejecutaremos una línea más que establecerá la consulta de “búsqueda” en el elemento seleccionado actualmente item.size.code .

  3. filter:search:true – Pasa true al filtro para permitir una concordancia estricta .

Eso es. Si size.code es size.code , solo tendremos un elemento h1 con el texto de size.name .

Lo probé en mi proyecto y funciona.

Buena suerte

Debe utilizar “seguimiento por” para que los objetos se puedan comparar correctamente. De lo contrario, Angular usará la forma nativa js de comparar objetos.

Entonces su código de ejemplo cambiaría a –

   

Esta es la forma más limpia de obtener un valor de una lista de opciones de selección angular (que no sea Id o Texto). Suponiendo que tiene un producto Seleccione así en su página:

  

Luego, en Su Controlador configure la función de callback de la siguiente manera:

  $scope.onSelectChange = function () { var filteredData = $scope.productsList.filter(function (response) { return response.Id === $scope.data.ProductId; }) console.log(filteredData[0].ProductColor); } 

Simplemente explicado: Dado que el evento ng-change no reconoce los elementos de opción en la selección, estamos utilizando ngModel para filtrar el elemento seleccionado de la lista de opciones cargada en el controlador.

Además, dado que el evento se activa antes de que ngModel esté realmente actualizado, es posible que obtenga resultados no deseados, por lo que una mejor manera sería agregar un tiempo de espera:

  $scope.onSelectChange = function () { $timeout(function () { var filteredData = $scope.productsList.filter(function (response) { return response.Id === $scope.data.ProductId; }) console.log(filteredData[0].ProductColor); }, 100); };