ottenere l’object ng selezionato con ng-change

Dato il seguente elemento di selezione

  

C’è un modo per far sì che MAGIC_THING sia uguale alla dimensione attualmente selezionata, quindi ho accesso a size.name e size.code nel mio controller?

size.code influisce su molte altre parti dell’app (URL immagine, ecc.), ma quando il modello ng di item.size.code viene aggiornato, item.size.name deve essere aggiornato anche per l’utente che deve affrontare cose. Presumo che il modo corretto per farlo sia catturare l’evento change e impostare i valori all’interno del mio controller, ma non sono sicuro di cosa posso passare in update per ottenere i valori corretti.

Se questo è completamente il modo sbagliato per farlo, mi piacerebbe sapere la strada giusta.

Invece di impostare ng-model su item.size.code, come fare per impostarlo sulla dimensione:

  

Quindi nel metodo update() , $scope.item verrà impostato sull’elemento attualmente selezionato.

E qualunque codice abbia bisogno di item.size.code , può ottenere quella proprietà tramite $scope.item.code .

Fiddle .

Aggiornamento basato su ulteriori informazioni nei commenti:

Utilizza qualche altra proprietà $ scope per il tuo modello ng selezionato, quindi:

  

controller:

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

Puoi anche ottenere direttamente il valore selezionato usando il seguente codice

   

script.js

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

anche tu provi questo:

  

Se la risposta di Divyesh Rupawala non funziona (passando l’elemento corrente come parametro), per favore vedi la funzione onChanged() in questo Plunker. Sta usando this :

http://plnkr.co/edit/B5TDQJ

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

Questo potrebbe darti qualche idea

.NET C # View Model

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

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

Modello angular:

 

Il filtro di AngularJS ha funzionato per me.

Supponendo che il code/id sia unico , possiamo filtrare quel particolare object con il filter di AngularJS e lavorare con le proprietà degli oggetti selezionati. Considerando l’esempio sopra:

   

{{size.name}}

Ora, ci sono 3 aspetti importanti a questo :

  1. ng-init="search.code = item.size.code"ng-init="search.code = item.size.code" dell’elemento h1 all’esterno della casella di select , imposta la query del filtro sull’opzione selezionata .

  2. ng-change="update(MAGIC_THING); search.code = item.size.code" – quando cambi l’input select, eseguiremo un’altra riga che imposterà la query “search” item.size.code selezionato item.size.code .

  3. filter:search:true – Passa true al filtro per abilitare la corrispondenza stretta .

Questo è tutto. Se size.code è uniqueID , avremo solo un elemento h1 con il testo di size.name .

Ho provato questo nel mio progetto e funziona.

In bocca al lupo

È necessario utilizzare “traccia per” in modo che gli oggetti possano essere confrontati correttamente. Altrimenti, Angular userà il modo js nativo per confrontare gli oggetti.

Quindi il tuo codice di esempio cambierebbe in –

   

Questo è il modo più pulito per ottenere un valore da un elenco di opzioni di selezione angular (diverso da Id o Testo). Supponendo che tu abbia selezionato un prodotto come questo nella tua pagina:

  

Quindi nel tuo controller imposta la funzione di callback in questo modo:

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

Spiegazione semplice: poiché l’evento ng-change non riconosce gli elementi opzione nella selezione, stiamo utilizzando ngModel per filtrare l’elemento selezionato dall’elenco delle opzioni caricato nel controller.

Inoltre, poiché l’evento viene triggersto prima che ngModel sia realmente aggiornato, potresti ottenere risultati indesiderati, quindi un modo migliore sarebbe aggiungere un timeout:

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