Obtenir la valeur lorsque l’option ng est modifiée

J’ai dans ma page .html une liste déroulante,

Menu déroulant:

 Select Account  

Je veux exécuter une action lorsque l’utilisateur sélectionne une valeur. Donc dans mon contrôleur j’ai fait:

Manette:

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

Mais la modification de la valeur dans la liste déroulante ne déclenche pas le code: $scope.$watch('blisterPackTemplateSelected', function()

En conséquence, j’ai essayé une autre méthode avec un: ng_change = 'changedValue()' sur la balise select

et

Fonction:

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

Mais blisterPackTemplateSelected est stocké dans une étendue enfant. J’ai lu que le parent ne peut pas accéder à la scope de l’enfant.

Quelle est la meilleure façon d’exécuter quelque chose lorsqu’une valeur sélectionnée dans une liste déroulante est modifiée? Si c’est la méthode 1, que fais-je mal avec mon code?

comme Artyom a dit que vous devez utiliser ngChange et passer l’object ngModel comme argument de votre fonction ngChange

Exemple :

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

Exemple en direct: http://jsfiddle.net/choroshin/9w5XT/4/

Je suis peut-être en retard pour cela, mais j’ai eu un peu le même problème.

J’avais besoin de passer à la fois l’ID et le nom dans mon modèle, mais toutes les solutions orthodoxes m’ont obligé à créer un code sur le contrôleur pour gérer le changement.

Je me suis débrouillé en utilisant un filtre.

   

Le “truc” est ici:

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

J’utilise le filtre intégré pour récupérer le nom correct pour l’identifiant

Voici un plunkr avec une démo de travail.

S’il vous plaît, utilisez pour cela la directive ngChange . Par exemple:

  

Et transmettez votre nouvelle valeur de modèle dans le contrôleur en tant que paramètre:

 ng-change="changeValue(blisterPackTemplateSelected)" 

La meilleure pratique consiste à créer un object (utilisez toujours un modèle. In ng)

Dans votre contrôleur:

 var myObj: { ngModelValue: null }; 

et dans votre modèle:

  

Maintenant, vous pouvez juste regarder

 myObj.ngModelValue 

ou vous pouvez utiliser la directive ng-change comme suit:

  

La vidéo egghead.io “The Dot” a une très bonne vue d’ensemble, de même que cette question très populaire de débordement de stack: quelles sont les nuances de l’inheritance prototypique / prototypique de scope dans AngularJS?

Vous pouvez transmettre la valeur ng-model via la fonction ng-change en tant que paramètre:

  

Il est un peu difficile de connaître votre scénario sans le voir, mais cela devrait fonctionner.

Vous pouvez faire quelque chose comme ça

    

au lieu d’append une option, vous devez utiliser data-ng-options.J’ai utilisé l’option Ajouter à des fins de test

Je suis en retard ici, mais j’ai résolu le même type de problème de cette manière qui est simple et facile.

  

et la fonction pour ng-change est la suivante:

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

Vous obtiendrez la valeur de l’option sélectionnée et le texte de la liste / du tableau en utilisant le filtre.
editobj.FlagName = (EmployeeStatus | filter: {Valeur: editobj.Flag}) [0] .KeyName

  

J’ai eu le même problème et trouvé une solution unique. Ce n’est pas la meilleure pratique, mais cela peut s’avérer simple / utile pour quelqu’un. Utilisez simplement jquery sur l’ID ou la classe ou votre balise select et vous avez alors access au texte et à la valeur de la fonction de modification. Dans mon cas, je passe des valeurs d’option via sails / ejs:

   

Puis, dans mon contrôleur angular, ma fonction ng-change ressemble à ceci:

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

J’ai essayé certaines solutions, mais voici un extrait de base de la production. Veuillez faire attention à la sortie de la console lors de l’assurance qualité de cet extrait.

Mark Up:

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

Code:

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

Explication: le point important ici est la vérification null de la valeur modifiée, c’est-à-dire si la valeur est «indéfinie» ou «nulle», nous devrions gérer cette situation.