Obtenir la valeur lorsque l'option ng-option est modifiée

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

Menu déroulant:

<select ng-model="blisterPackTemplateSelected" data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates">
    <option value="">Select Account</option>
</select>

Je souhaite 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 de sélection

et

Fonction:

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

Mais le blisterPackTemplateSelectedest stocké dans une portée enfant. J'ai lu que le parent ne peut pas accéder à la portée enfant.

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

comme Artyom l'a dit, vous devez utiliser ngChange et passer l'objet ngModel comme argument à votre fonction ngChange

Exemple :

<div ng-app="App" >
  <div ng-controller="ctrl">
    <select ng-model="blisterPackTemplateSelected" ng-change="changedValue(blisterPackTemplateSelected)" 
            data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates">
      <option value="">Select Account</option>
    </select>
    {{itemList}}     
  </div>       
</div>

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 l'identifiant et le nom dans mon modèle, mais toutes les solutions orthodoxes m'ont fait créer du code sur le contrôleur pour gérer le changement.

Je m'en suis sorti en utilisant un filtre.

<select 
        ng-model="selected_id" 
        ng-options="o.id as o.name for o in options" 
        ng-change="selected_name=(options|filter:{id:selected_id})[0].name">
</select>
<script>
  angular.module("app",[])
  .controller("ctrl",['$scope',function($scope){
    $scope.options = [
      {id:1, name:'Starbuck'},
      {id:2, name:'Appolo'},
      {id:3, name:'Saul Tigh'},
      {id:4, name:'Adama'}
    ]
  }])
</script>

Le "truc" est là:

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

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

Voici un plunkr avec une démo fonctionnelle.

Veuillez utiliser la ngChangedirective pour cela . Par exemple:

<select ng-model="blisterPackTemplateSelected" 
        ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates" 
        ng-change="changeValue(blisterPackTemplateSelected)"/>

Et passez 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 objet (utilisez toujours un .dans ng-model)

Dans votre contrôleur:

var myObj: {
     ngModelValue: null
};

et dans votre modèle:

<select 
    ng-model="myObj.ngModelValue" 
    ng-options="o.id as o.name for o in options">
</select>

Maintenant tu peux juste regarder

myObj.ngModelValue

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

<select 
    ng-model="myObj.ngModelValue" 
    ng-options="o.id as o.name for o in options"
    ng-change="myChangeCallback()">
</select>

La vidéo egghead.io "The Dot" a une très bonne vue d'ensemble, tout comme cette question très populaire de débordement de pile: Quelles sont les nuances de l'héritage prototypique / prototypique de portée dans AngularJS?

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

<select 
  ng-model="blisterPackTemplateSelected" 
  data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates" 
  ng-change="changedValue(blisterPackTemplateSelected)">
    <option value="">Select Account</option>
</select>

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

Tu peux faire quelque chose comme ça

<html ng-app="App" >
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<script>
angular.module("App",[])
  .controller("ctrl",['$scope',function($scope){

    $scope.changedValue = function(item){       
    alert(item);
  }
  }]);
</script>
<div >
<div ng-controller="ctrl">
    <select  ng-model="blisterPackTemplateSelected" ng-change="changedValue(blisterPackTemplateSelected)" >
    <option value="">Select Account</option>
    <option value="Add">Add</option>
</select>
</div>
</div>
</html>

au lieu d'ajouter l'option, vous devriez utiliser data-ng-options J'ai utilisé l'option Add à des fins de test

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

<select ng-model="blisterPackTemplateSelected" ng-change="selectedBlisterPack(blisterPackTemplateSelected)">
<option value="">Select Account</option>
<option ng-repeat="blisterPacks in blisterPackTemplates" value="{{blisterPacks.id}}">{{blisterPacks.name}}</option>

et la fonction pour ng-change est la suivante;

 $scope.selectedBlisterPack= function (value) {  

        console.log($scope.blisterPackTemplateSelected);

    };

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

<select name="statusSelect"
      id="statusSelect"
      class="form-control"
      ng-model="editobj.Flag"
      ng-options="option.Value as option.KeyName for option in EmployeeStatus"
      ng-change="editobj.FlagName=(EmployeeStatus|filter:{Value:editobj.Flag})[0].KeyName">
</select>

J'ai eu le même problème et j'ai 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'identifiant ou la classe ou votre balise de sélection et vous aurez alors accès au texte et à la valeur de la fonction de modification. Dans mon cas, je passe des valeurs d'options via sails / ejs:

    <select id="projectSelector" class="form-control" ng-model="ticket.project.id" ng-change="projectChange(ticket)">
      <% _.each(projects, function(project) { %>
        <option value="<%= project.id %>"><%= project.title %></option>
        <% }) %>
    </select>

Ensuite, dans mon contrôleur angulaire, ma fonction ng-change ressemble à ceci:

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

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

Marquer:

<!DOCTYPE html>
<html ng-app="appUp">
<head>
<title>
  Angular Select snippet
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />

</head>


<body ng-controller="upController">

<div  class="container">

 <div class="row">
 <div class="col-md-4">

 </div> 
 <div class="col-md-3">
    <div class="form-group">
    <select name="slct" id="slct" class="form-control" ng-model="selBrand" ng-change="Changer(selBrand)" ng-options="brand as brand.name for brand in stock">
    <option value="">
        Select Brand
    </option>
    </select>
    </div>

    <div class="form-group">
    <input type="hidden" name="delimiter" value=":" ng-model="delimiter" />
    <input type="hidden" name="currency" value="$" ng-model="currency" />
    <span>
     {{selBrand.name}}{{delimiter}}{{selBrand.price}}{{currency}}
    </span>
    </div>

 </div> 
 <div class="col-md-4">

 </div>
 </div>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js">
</script>
<script src="js/ui-bootstrap-tpls-2.5.0.min.js"></script>
<script src="js/main.js"></script>
</body>

</html>

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 le contrôle nul de la valeur modifiée, c'est-à-dire que si la valeur est «indéfinie» ou «nulle», nous devons gérer cette situation.