60

次のngSwitchがあります：

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

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

4

7 に答える 7

73

angular >=v1.5.10 の場合、

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

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

ここでの議論を参照してください https://github.com/angular/angular.js/issues/3410 注、私の経験に基づいて、数字では機能しません...まだですか?

于 2016-09-13T10:52:19.527 に答える
43

これは 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/

于 2014-12-21T17:27:58.240 に答える
16

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>
于 2014-09-28T05:33:47.257 に答える
5

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

ngSwitchController にcasesは、マップである 1 つのプロパティがあります。すべてのケース キーには接頭辞が付いて!おり、デフォルトのケースは です?。transclude各ケース値は、 と の 2 つのプロパティを持つオブジェクトelementです。
警告: ngModelController とは異なり、 ngSwitchController は公開された 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

于 2015-08-03T17:27:28.580 に答える
3

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

例：

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

于 2014-03-24T13:24:22.887 に答える