web-dev-qa-db-ja.com

angularjs：ng-switch-whenの複数の値

次のngSwitchがあります。

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

ご覧のとおり、2つのオプションWrongとwrongのテキストcorrectがあります。パイプ|を使用しようとしました（ご覧のように）が、うまくいきません。助言がありますか ？

angularjsng-switch
57
Jeanluca Scaljeri

angular> = v1.5.10の場合、

ng-switch-when-separator="|"をng-whenノードに追加することで実行できます。 ドキュメントの例を参照してください。

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

ここでの議論を参照してください https://github.com/angular/angular.js/issues/3410 私の経験に基づいて、それは数字では動作しません...まだ？

62
Chauskin Rodion

これはng-ifを使用した場合とほぼ同じですが、この利点は、メインng-switch内でng-switch-when = "true"またはdefaultまたはfalseを複数回使用できることです。

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

ライブ： http://jsfiddle.net/8yf15t2d/

40
Salahi Halil Altıncı

単一のng-switch-whenで複数の条件を設定することはできません。

1つの代替手段はng-ifを使用することですが、エラー処理の場合は、コントローラーのスコープにエラー変数を入力し、ng-show=errorを使用することを好みます。

20
Ed Hinchliffe

同じことを意味する値を同じ値にマップするフィルターを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>
16
peppydip

これは、角度のベースディレクティブでは実現できませんが、必要に応じて、独自のディレクティブを作成してこれを実装でき、既存のngSwitchディレクティブと既にインターフェイスできます。

ngSwitchControllerには、マップである1つのプロパティcasesがあります。すべてのケースキーの先頭には!が付き、デフォルトのケースは?と等しくなります。各ケース値は、transcludeとelementの2つのプロパティを持つオブジェクトです。
警告： ngModelController とは異なり、ngSwitchControllerはnot公開されたAPIなので、変更される可能性があります。

元のngSwitchWhenDirectiveに基づいて、既存のすべてのngSwitch、ngSwitchWhen、およびngSwitchDefaultディレクティブと競合することなく機能するmultiswitchWhenを構築できます。

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

プランカーの例： http://plnkr.co/edit/K9znnnFiVnKAgGccSlrQ?p=preview

5
Jonathan Gawrych

別のスイッチケースを追加できます。

例：

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

3
Alex Choroshin

オプション選択のngスイッチが役立つ場合があります

<select ng-model="myVar">
  <option value="option1">Option 1
  <option value="option2">Option 2
  <option value="option3">Option 3
</select>
<div ng-switch="myVar">
  <div ng-switch-when="option1">
     <p>Option 1 is selected .</p>
  </div>
  <div ng-switch-when="option1">
     <p>Option 2 is selected</p>
  </div>
  <div ng-switch-default>
     <p>Option 3 is selected </p>
  </div>
</div>
0
mukesh mali