Angularjs: несколько значений в ng-переключателе, когда

Ответ 1

Для angular >= v1.5.10,

Вы можете сделать это, добавив ng-switch-when-separator="|" в ng-when node. см. пример в документации.

<span ng-switch-when="wrong|incorrect" ng-switch-when-separator="|">

см. обсуждение здесь https://github.com/angular/angular.js/issues/3410 Заметьте, по моему опыту он не работает с цифрами... еще?

Ответ 2

Это почти то же самое с использованием ng-if, но преимущество этого в том, что вы можете использовать ng-switch-when = "true" или по умолчанию или false несколько раз в главном ng-переключателе.

<p ng-switch on="(status == 'wrong') || (status == 'incorrect')">
    <span ng-switch-when="true">
        Wrong
    </span>
    <span ng-switch-default>
       Correct
    </span>
</p>

Live: http://jsfiddle.net/8yf15t2d/

Ответ 3

Вы не можете иметь несколько условий с одним ng-switch-when.

Один из вариантов заключается в использовании ng-if, но в случае обработки ошибок я предпочитаю заполнять переменную ошибки в области в контроллере и использовать ng-show=error.

Ответ 4

Вы можете добавить фильтр к status, который отображает значения, которые означают одно и то же, в одно и то же значение.

.filter('meaning', function() {
    return function(input) {
      input = input || '';
      if (['wrong', 'amiss','awry', 'bad', 'erroneous', 'false', 'inaccurate',\
           'misguided', 'mistaken', 'unsound', 'incorrect'].indexOf(input) != -1)
          return 'wrong';
      // You can make it generic like this:
      synonymsDictionary = {
        'someWord' : ['syn1', 'syn2', 'syn3' ... ],
        'someOtherWord' : ['otherWordSyn1', 'otherWordSyn2', 'otherWordSyn3' ...]
        .
        .
        .
      };

      for (var word in synonymsDictionary)
          if (synonymsDictionary[word].indexOf(input) != -1)
              return word; // This way you could iterate over a bunch of arrays...

         // Edge case
         else return input;
    };
  })

Затем вы просто

<p ng-switch="status|meaning">
    <span ng-switch-when="wrong">
       Wrong
    </span>
    <span ng-switch-default>
       Correct
    </span>
</p>

Хотя в вашем случае вы, возможно, просто хотели напечатать сообщение, чтобы вы могли вытащить сообщение из словаря...

Что-то вроде:

<span ng-if="status">
    {{getStatusMessage(status)}}
</span>

Ответ 5

Этого нельзя достичь с помощью базовых директив angular, но если хотите, вы можете написать свою собственную директиву для реализации этого и уже могли бы взаимодействовать с существующей директивой ngSwitch.

ngSwitchController имеет одно свойство cases, которое является картой. Каждый ключевой ключ имеет префикс !, а случай по умолчанию равен ?. Каждое значение case - это объект с двумя свойствами: transclude и element.
Предупреждение. В отличие от ngModelController, ngSwitchController - это не опубликованный API, поэтому он может быть изменен.

Основываясь на исходном ngSwitchWhenDirective, мы можем построить multiswitchWhen, который будет работать со всеми существующими директивами ngSwitch, ngSwitchWhen и ngSwitchDefault без конфликтов.

.directive('multiswitchWhen', function () {
    return {
        transclude: 'element',
        priority: 800,
        require: '^ngSwitch',
        link: function(scope, element, attrs, ctrl, $transclude) {
            var selectTransclude = { transclude: $transclude, element: element };
            angular.forEach(attrs.multiswitchWhen.split('|'), function(switchWhen) {
                ctrl.cases['!' + switchWhen] = (ctrl.cases['!' + switchWhen] || []);
                ctrl.cases['!' + switchWhen].push(selectTransclude);
            });
        }
    }
});

Пример plunker: http://plnkr.co/edit/K9znnnFiVnKAgGccSlrQ?p=preview

Ответ 6

Вы можете добавить еще один корпус коммутатора.

Пример:

<p ng-switch="status">
    <span ng-switch-when="wrong">
       Wrong
    </span>
<span ng-switch-when="incorrect">
       Wrong
    </span>
    <span ng-switch-default>
       Correct
    </span>
</p>

Пример в реальном времени: http://jsfiddle.net/choroshin/Zt2qE/2/