如何从select>中调用AngularJS函数选项 [英] How to call AngularJS function from select > option

问题描述

我需要从选择中调用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> 
  

然而，该函数永远不会被调用。

在控制器中，

  $ scope.functionCall = function（value）{
 //做值
} 
  

如何调用函数。对于这件事，建议你使用 ng-change ，结果可能与Cyril相同，但代码更具可读性和可测试性，也被认为是一种更好的做法：

下面是一个展示它的实际操作：
http://plnkr.co/edit/7GgwN9gr9qPDgAUs7XVx?p=preview

 app.controller（'MainCtrl'，function（$ scope）{
 $ scope.listOfOptions = ['One'，'Two'，'Three']; 
 
 $ scope.selectedItemChanged = function（）{
 $ scope.calculatedValue ='您选择了数字'+ $ scope.selectedItem; 
 } 
}）; 
  

和HTML：

 < select ng-options =listOfOptions中选项的选项
 ng-model =selectedItem
 ng-change =selectedItemChanged（）> 
< / select> 
  

希望有所帮助。谢谢。

I need to call an AngularJS function from selection:

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

解决方案

It's recommended that you use ng-change for 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:

Here is a plunker demonstrating it in 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;
  }
});

And the HTML:

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

Hope that helps. Thanks.

这篇关于如何从select>中调用AngularJS函数选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！