web-dev-qa-db-fra.com

Comment appeler la fonction AngularJS depuis select> option

Je dois appeler une fonction AngularJS de la sélection:

<select ng-model="selection" >
<option onselect="angular.element(this).scope().functionCall('one')">one</option>
<option onselect="angular.element(this).scope().functionCall('two')">two</option>
<option onselect="angular.element(this).scope().functionCall('three')">three</option>
<option onselect="angular.element(this).scope().functionCall('four')">four</option>
</select>

Cependant, la fonction n'est jamais appelée.

Dans le contrôleur,

$scope.functionCall = function(value){
// do stuff with value
}

Comment puis-je appeler la fonction.

htmlangularjs
13
user3779089

Il est recommandé d'utiliser ng-change d'ailleurs, le résultat peut être le même que celui de Cyril, mais le code est plus lisible et testable, il est également considéré comme une meilleure pratique:

Voici un dépliant qui le démontre en action: http://plnkr.co/edit/7GgwN9gr9qPDgAUs7XVx?p=preview

app.controller('MainCtrl', function($scope) {
  $scope.listOfOptions = ['One', 'Two', 'Three'];

  $scope.selectedItemChanged = function(){
    $scope.calculatedValue = 'You selected number ' + $scope.selectedItem;
  }
});

Et le HTML:

<select ng-options="option for option in listOfOptions" 
        ng-model="selectedItem"
        ng-change="selectedItemChanged()">
</select>

J'espère que cela pourra aider. Merci.

31
Fedaykin

Un petit peu pour ajouter les réponses de Cyril et Fedaykin:

Code HTML

<select ng-options="option for option in listOfOptions" 
    ng-model="selectedItem"
    ng-change="selectedItemChanged()">

Code du contrôleur

app.controller('MainCtrl', function($scope) {
  $scope.listOfOptions = ['One', 'Two', 'Three'];

  $scope.selectedItemChanged = function(){
   console.log($scope.selectedItem);
  }
});

Vous remarquerez que lorsque l’option de sélection est modifiée, une fonction est appelée qui vous donnera la valeur de la valeur actuellement sélectionnée.

2
Abhay Naveen

Voici ce que vous pourriez faire:

HTML

<div ng-controller="YourController">
    <select ng-model="selection" ng-options="choice for choice in choices"></select>
</div>

Votre contrôleur:

$scope.choices = ["first choice", "second choice",...]
$scope.$watch('selection', function(newVal, oldVal){
    switch(newVal){
        case 'first choice':
            [do Some Stuff]
            break;
        case 'second choice':
            [do Some Stuff]
            break;
        default:
            [well, do some stuff]
            break;
    }
}

BTW: J'ai décidé de mettre les options dans le javascript, mais ce que vous avez fait fonctionne également.

EDIT: ng-change VS $ regarder, voir cette question

0
Cyril Duchon-Doris

Premièrement, onselect n'est pas un mot clé angulaire, c'est un mot clé javascript normal

Vous devriez utiliser ng-change param en select ou utilisez comme ci-dessous ..,

En code HTML, vous devez utiliser comme ceci.,

<select ng-model="selection" >
<option onselect="functionCall('one')">one</option>
<option onselect="functionCall('two')">two</option>
<option onselect="functionCall('three')">three</option>
<option onselect="functionCall('four')">four</option>
</select>

et dans le contrôleur

function functionCall(value){
//do stuff with value
}
0
Mohamed Abdullah J