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