Блог

Главная - Вопросы по программированию - Привязка разных функций к разным опциям в AngularJS

Привязка разных функций к разным опциям в AngularJS

#javascript #angularjs

#javascript #angularjs

Вопрос:

Мне нужно сделать такую вещь

 <select>
  <option ng-sth="firstMethodToBeCalled()">Option 1</option>
  <option ng-sth="secondMethodToBeCalled()">Option 2</option>
<select>

Есть ли какой-нибудь способ сделать это?
Мне это нужно, потому что в настоящее время у меня есть такой код:

 <select ng-model="someModel" ng-change="callThisFunction()">
  <option value="value1">Option 1</option>
  <option value="value2">Option 2</option>
  ...
  <option value="valueN">Option N</option>
</select>

И я хочу добавить к этому выбору только еще две опции, но вызывающие другую функцию. Я могу реорганизовать его, чтобы вызвать ту же функцию-оболочку и определить, какая конечная функция должна вызываться с некоторой условной логикой, но мне интересно, есть ли возможность назначить другую. Я искал это в течение некоторого времени и не нашел никакого решения.

Комментарии:

1. Разве вы не можете передать значение ng-model в callThisFunction() и определить логику, которая будет вызываться на основе значения.

2. Да, я могу. Но мне пришлось бы реорганизовать несколько контроллеров / служб, которые полагаются на эту модель, для поддержания чистого кода. Конечно, я это сделаю, если больше ничего не попадется.

3. Посмотрите на это jsfiddle.net/81t6cbjw/483

Ответ №1:

К сожалению, я боюсь, что вы не можете.

Кстати, я бы предпочел иметь одну функцию в ng-change и поместить в нее некоторую логику (и вызвать вашу вторую функцию тоже оттуда), например:

 $scope.callThisFunction = function(){
   if(someModel == "baz")
      myFirstfunction();
   else
      mySecondFunction();
}

на мой взгляд, это самое чистое решение и наиболее доступное.

Ответ №2:

Да! есть способ, которым вы можете этого добиться.Создайте объект functions с ключами в качестве выбранного вами параметра, который является вашим ng-model , и значением в виде функции, выровненной с ним, и выполняйте в нем действия.

В вашем JS

 $scope.functions ={
    "value1":function(){
        console.log("function for option 1 called");
    },"value2":function(){
        console.log("function for option 2  called");
    }
};

В вашем HTML

 <select ng-model="someModel" ng-change="functions[someModel]()">
  <option value="value1">Option 1</option>
  <option value="value2">Option 2</option>
  ...
  <option value="valueN">Option N</option>
</select>

Вызовите объект functions в вашем ng-change , передав ng-model выбранную вами опцию, которая вызовет соответствующую функцию.