AngularJS: ng-switch - когда с OR

Ответ 1

ngswitch позволяет сравнить только одно условие.

Я хочу проверить несколько условий, в которых вы можете использовать ng-if, доступных с версия 1.1.5

Ссылка

Важно отметить, что с помощью ng-if и ng-switch удалить элемент из структуры DOM, напротив показать и скрыть.

Это важно, когда вы пересекаете DOM для поиска элементов.

Ответ 2

Это тоже будет работать

<div ng-repeat="w in windows" ng-switch="w.type == 'val1' || w.type == 'val2'">
  <div ng-switch-when="true">
    sup
  </div>
</div>

Ответ 3

Я создал простую директиву вместо ngSwitchWhen, которая позволяет указать несколько случаев для одного тега. Он также позволяет вам указывать динамические значения вместо чисто статических значений.

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

Я использую angular 1.3.15, но я провел быстрый тест с angular 1.4.7, и он отлично работал там.

Демо-версия плунжера

Код

module.directive('jjSwitchWhen', function() {
    // Exact same definition as ngSwitchWhen except for the link fn
    return {
        // Same as ngSwitchWhen
        priority: 1200,
        transclude: 'element',
        require: '^ngSwitch',
        link: function(scope, element, attrs, ctrl, $transclude) {
            var caseStms = scope.$eval(attrs.jjSwitchWhen);
            caseStms = angular.isArray(caseStms) ? caseStms : [caseStms];

            angular.forEach(caseStms, function(caseStm) {
                caseStm = '!' + caseStm;
                ctrl.cases[caseStm] = ctrl.cases[caseStm] || [];
                ctrl.cases[caseStm].push({ transclude: $transclude, element: element });
            });
        }
    };
});

Использование

  $scope.types = {
      audio: '.mp3', 
      video: ['.mp4', '.gif'],
      image: ['.jpg', '.png', '.gif'] // Can have multiple matching cases (.gif)
  };

  <div ng-switch="mediaType">
    <div jj-switch-when="types.audio">Audio</div>

    <div jj-switch-when="types.video">Video</div>

    <div jj-switch-when="types.image">Image</div>

    <!-- Even works with ngSwitchWhen -->
    <div ng-switch-when=".docx">Document</div>

    <div ng-switch-default>Invalid Type</div>
  <div>

Ответ 4

Теперь это возможно с помощью ng-switch-when-separator, который был добавлен в документацию Angular в 1.5.10:

<div ng-repeat="w in windows" ng-show="visibleWindowId == w.id" ng-switch="w.type">
    <div ng-switch-when="val1|val2" ng-switch-when-separator="|">
        sup
    </div>
</div>

Ответ 5

Вы можете использовать ng-class, чтобы вы могли использовать оператор or в своем выражении. Кроме того, angular -ui имеет директиву if.