web-dev-qa-db-ja.com

AngularJS：ng-switch-when with OR

Ng-switch-whenでORを使用できますか？

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

そうでない場合、上記をどのように達成できますか？

ありがとう：）

angularjsng-switch
32
Pavel

ngswitchでは、1つの条件のみを比較できます。

私はあなたが使用できる複数の条件をテストしようとしていますng-ifバージョン1.1.5 で利用可能

参照

_ng-ifおよびng-switchDOMから要素を削除 構造、表示と非表示ではなく

これは、DOMを走査して要素を見つけるときに重要です。

17
Malkus

これは、1.5.10でAngularドキュメントに追加されたng-switch-when-separatorを使用して可能になりました。

<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>
14
searlea

これも機能します

<div ng-repeat="w in windows" ng-switch="w.type == 'val1' || w.type == 'val2'">
  <div ng-switch-when="true">
    sup
  </div>
</div>
8
Luís Deschamps Rudge

ngSwitchWhenの代わりに、単一のタグに複数のケースを指定できる単純なディレクティブを作成しました。また、純粋に静的な値の代わりに動的な値を指定することもできます。

ただし、コンパイル時に式を評価するのは一度だけなので、すぐに正しい値を返す必要があります。アプリケーションの別の場所で定義された定数を使用したいので、私の目的ではこれで問題ありませんでした。おそらく式を動的に再評価するように変更できますが、ngSwitchでさらにテストする必要があります。

私はangular 1.3.15を使用していますが、angular 1.4.7で簡単なテストを実行しました。

Plunker Demo

コード

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>
5
Joel Jeske

ng-classを使用して、式でor演算子を使用できます。また、angle-uiにはifディレクティブがあります。

2
Tosh