Comment appeler la fonction AngularJS à partir de select & gt; option

J'ai besoin d'appeler une AngularJS fonction de 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.

source d'informationauteur user3779089

  1. 28

    Il est recommandé que vous utilisez ng-change pour cette question, le résultat peut être le même que Cyril, mais le code est plus lisible et vérifiables, aussi il est considéré comme une meilleure pratique:

    Ici est un plunker montrant 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 code HTML:

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

    Espère que ça aide. Merci.

  2. 2

    Un Peu à ajouter sur Cyril et Fedaykin réponses:

    Code HTML

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

    Contrôleur De Code

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

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

    Vous remarquerez que lorsque l'option sélection, est modifié, une fonction est appelée, ce qui donnera la vous la valeur du courant valeur sélectionnée.

  3. 0

    Voici ce que vous pouvez faire :

    HTML

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

    YourController :

    $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 n'avez marche aussi.

    EDIT : ng-variation $watch, voir cette question

  4. 0

    D'abord, onselect n'est pas un mot-clé angulaire, C'est normal javascript mot-clé

    Vous devez utiliser ng-changer les param de sélectionner ou d'utiliser comme ci-dessous..,

    Dans le code HTML que vous avez à l'utiliser comme ça.,

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