Подтвердить что ты не робот

Как вызвать функцию AngularJS из опции select>

Мне нужно вызвать функцию 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
}

Как я могу вызвать функцию.

4b9b3361

Ответ 1

Рекомендуется, чтобы вы использовали ng-change, результат может быть таким же, как у Cyril's, но код более читабельным и проверяемым, а также считается лучшей практикой:

Вот плункер, демонстрирующий это в действии: 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>

Надеюсь, что это поможет. Спасибо.

Ответ 2

A Немного добавьте ответы Кирилла и Федайкина:

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

Вы заметите, что при изменении варианта выбора вызывается функция, которая даст вам значение текущего выбранного значения.

Ответ 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, но то, что вы сделали, также работает.

EDIT: ng-change VS $watch, см. этот вопрос

Ответ 4

Во-первых, onselect не является ключевым словом angular, это нормальное ключевое слово javascript

Вы должны использовать параметр ng-change в select или использовать, как показано ниже.,

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

и в контроллере

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