Obtenir de la valeur lorsque l'option ng choisie change

j'ai dans mon .la page html d'une liste déroulante,

liste Déroulante:

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

je veux exécuter une action lorsque l'utilisateur de sélectionner une valeur. Ainsi, dans mon contrôleur, j'ai fait:

contrôleur:

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

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

en conséquence j'ai essayé une autre méthode avec a: ng_change = 'changedValue()' sur la balise select

et

fonction:

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

mais le blisterPackTemplateSelected est stocké dans une lunette pour enfant. J'ai lu que le parent ne peut pas obtenir l'accès à l'enfant.

Quelle est la 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?

105
demandé sur Mosh Feu 2014-02-25 18:06:14

10 réponses

comme Artyom dit que 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);
  }       
}

Live example: http://jsfiddle.net/choroshin/9w5XT/4 /

171
répondu Alex Choroshin 2016-04-11 11:42:08

je peux ê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 fait faire du code sur le contrôleur pour gérer le changement.

j'ai macgyveré mon chemin 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 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'id

voici un plunkr avec une démo de travail.

31
répondu simon 2016-04-11 11:37:44

s'il vous Plaît, utilisez ngChange de la directive. 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 controller comme paramètre:

ng-change="changeValue(blisterPackTemplateSelected)"
17
répondu Artyom Pranovich 2015-02-24 11:04:35

la meilleure pratique est de créer un objet (toujours utiliser un . dans le modèle ng)

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 vous pouvez juste regarder

myObj.ngModelValue

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

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

the egghead.io vidéo "le point" a un très bon aperçu, comme le fait ce très question populaire de débordement de la pile: quelles sont les nuances de la portée prototypal / prototypical héritage en AngularJS?

8
répondu Martijn Welker 2017-05-23 12:26:27

vous pouvez passer la valeur du modèle ng à travers la fonction ng-change comme 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>

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

5
répondu Wawy 2014-02-25 14:26:43

Vous pouvez faire quelque chose comme cela

<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 de l'option add vous devriez utiliser data-ng-options.J'ai utilisé L'option Ajouter à des fins de test

2
répondu Saurabh 2015-11-12 12:31:13

je suis en retard ici mais j'ai résolu le même genre de problème de cette façon 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);

    };
2
répondu usman 2016-06-04 04:32:34

vous obtiendrez la valeur de l'option sélectionnée et le texte de la liste/tableau en utilisant le filtre.

editobj.FlagName=(EmployeeStatus / filter: {valeur: editobj.Drapeau})[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>
1
répondu Rahul Modi 2017-01-30 11:42:27

j'ai eu le même problème et trouvé une solution unique. Il ne s'agit pas d'une pratique exemplaire, mais elle peut s'avérer simple/utile pour quelqu'un. Il suffit d'utiliser jquery sur l'id ou la classe ou votre étiquette select et vous avez alors accès à la fois au texte et à la valeur de la fonction change. Dans mon cas, je passe dans les valeurs d'option via voiles/ 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>

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

    $scope.projectChange = function($scope) {
         $scope.project.title=$("#projectSelector option:selected").text();
     };
0
répondu edencorbin 2016-03-06 00:28:16

j'ai essayé quelques solutions,mais voici un extrait de production de base. S'il vous plaît, faites attention à la sortie de la console pendant l'assurance de la qualité de cet extrait.

Marque :

<!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 null De La valeur changée, i.e. si la valeur est 'undefined' ou 'null' nous devrions gérer cette situation.

0
répondu Kirill Shur 2017-02-05 13:19:32