Obtendo o object ng selecionado com ng-change

Dado o seguinte elemento select

  

Existe uma maneira de obter MAGIC_THING para ser igual ao tamanho atualmente selecionado, então eu tenho access a size.name e size.code no meu controlador?

size.code afeta muitas das outras partes do aplicativo (URLs de imagem, etc), mas quando o modelo ng de item.size.code é atualizado, item.size.name precisa ser atualizado também para o usuário coisa. Eu suponho que a maneira correta de fazer isso é capturar o evento de mudança e definir os valores dentro do meu controlador, mas não tenho certeza do que posso passar para atualização para obter os valores apropriados.

Se isso é completamente errado, eu adoraria saber o caminho certo.

Em vez de definir o modelo ng como item.size.code, que tal configurá-lo para o tamanho:

  

Em seguida, no método update() , $scope.item será definido para o item atualmente selecionado.

E qualquer código necessário item.size.code , pode obter essa propriedade via $scope.item.code .

Violino .

Atualizar com base em mais informações nos comentários:

Use alguma outra propriedade $ scope para o seu ng-model select então:

  

Controlador:

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

Você também pode obter diretamente o valor selecionado usando o seguinte código

   

script.js

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

você também pode tentar isso:

  

Se a resposta de Divyesh Rupawala não funcionar (passando o item atual como o parâmetro), por favor veja a function onChanged() neste Plunker. Está usando this :

http://plnkr.co/edit/B5TDQJ

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

Isso pode lhe dar algumas idéias

Modelo de visualização do .NET C #

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

Controlador de API do .NET C # Web

 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."); } ); 

Modelo Angular:

 

O Filtro do AngularJS funcionou para mim.

Assumindo que o code/id seja único , podemos filtrar esse object em particular com o filter do AngularJS e trabalhar com as propriedades dos objects selecionados. Considerando o exemplo acima:

   

{{size.name}}

Agora, existem 3 aspectos importantes para isso :

  1. ng-init="search.code = item.size.code" – ao inicializar o elemento h1 fora da checkbox de select , defina a consulta de filtro para a opção selecionada .

  2. ng-change="update(MAGIC_THING); search.code = item.size.code" – quando você alterar a input de seleção, executaremos mais uma linha que definirá a consulta de “pesquisa” para o item.size.code atualmente selecionado item.size.code .

  3. filter:search:true – passa true para filtrar para ativar a correspondência estrita .

É isso aí. Se o size.code for uniqueID , teremos apenas um elemento h1 com o texto size.name .

Eu testei isso no meu projeto e funciona.

Boa sorte

Você precisa usar “track by” para que os objects possam ser comparados corretamente. Caso contrário, o Angular usará o modo nativo de comparar objects.

Então, seu código de exemplo mudaria para –

   

Essa é a maneira mais limpa de obter um valor de uma lista de opções de seleção angular (diferente de O ID ou Texto). Supondo que você tenha um Produto Selecione assim em sua página:

  

Em seguida, no seu controlador, defina a function de retorno de chamada da seguinte maneira:

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

Simplesmente Explicado: Como o evento ng-change não reconhece os itens da opção na seleção, estamos usando o ngModel para filtrar o Item selecionado da lista de opções carregada no controlador.

Além disso, como o evento é triggersdo antes de o ngModel ser realmente atualizado, você pode obter resultados indesejáveis. Portanto, uma maneira melhor seria adicionar um tempo limite:

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