Question

我需要从选择中调用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){
// do stuff with value
}

如何调用该功能。

Answer 1

建议您使用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 = 'You selected number ' + $scope.selectedItem;
  }
});

HTML：

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

希望有所帮助。感谢。

Answer 2

补充一点西里尔和Fedaykin的答案：

HTML代码

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

控制器代码

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

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

您会注意到，当更改选择选项时，会调用一个函数，该函数将为您提供当前所选值的值。

Answer 3

以下是您可以做的事情：

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：我决定将这些选项放在javascript中，但你所做的也是有用的。

编辑：ng-change VS $ watch，see this question

如何从select＆gt;调用AngularJS函数选项

3 个答案: