Html 如何从选择>选项调用AngularJS函数

How to call AngularJS function from select > option

提问by user3779089

I need to call an AngularJS function from selection:

我需要从选择中调用一个 AngularJS 函数：

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

However, the function never gets called.

但是，该函数永远不会被调用。

In the controller,

在控制器中，

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

How can I call the function.

我如何调用该函数。

回答by Fedaykin

It's recommended that you use ng-changefor that matter, the result may be the same as Cyril's, but the code is more readable and testable, also it is considered a better practice:

建议你使用ng-change这个，结果可能和 Cyril 的一样，但是代码更易读和可测试，也被认为是更好的做法：

Here is a plunker demonstrating it in action: http://plnkr.co/edit/7GgwN9gr9qPDgAUs7XVx?p=preview

这是一个演示它在行动中的plunker：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;
  }
});

And the HTML:

和 HTML：

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

Hope that helps. Thanks.

希望有帮助。谢谢。

回答by Abhay Naveen

A Little bit to add on Cyril's and Fedaykin answers:

对 Cyril 和 Fedaykin 的回答要补充一点：

HTML code

HTML代码

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

Controller Code

控制器代码

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

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

You will notice that when the select option is changed, a function gets called which will give the you the value of the current selected value.

您会注意到更改“选择”选项时，将调用一个函数，它将给出当前所选值的值。

回答by Cyril Duchon-Doris

Here's what you could do :

这是你可以做的：

HTML

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: I decided to put the options in the javascript, but what you did also works.

顺便说一句：我决定把选项放在 javascript 中，但你所做的也有效。

EDIT : ng-change VS $watch, see this question

编辑：ng-change VS $watch，看到这个问题

回答by Mohamed Abdullah J

First, onselect is not a angular keyword, It's a normal javascript keyword

首先，onselect 不是 angular 关键字，它是一个普通的 javascript 关键字

You should use ng-change param in select or use like below..,

您应该在选择或使用中使用 ng-change 参数，如下所示..，

In HTML code you have to use like this.,

在 HTML 代码中，您必须像这样使用。，

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

and in the controller

并在控制器中

function functionCall(value){
//do stuff with value
}