60

我有以下 ngSwitch：

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

如您所见，我有Wrong两个选项的文本wrong和correct. 我已经尝试（如您所见）使用 pipe |，但这不起作用。有什么建议么 ？

4

7 回答 7

73

对于角度 >=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 回答
20

单个 . 不能有多个条件ng-switch-when。

一种替代方法是ng-if使用ng-show=error.

于 2014-03-24T13:25:01.417 回答
16

You can add a filter to the status that maps values that mean the same thing into the same value.

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

Then you simply

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

Although in your case, you may have just wanted to print a message so you could have pulled the message from a dictionary...

Something like:

<span ng-if="status">
    {{getStatusMessage(status)}}
</span>
于 2014-09-28T05:33:47.257 回答
5

这不能通过 Angular 的基本指令来实现，但如果你愿意，你可以编写自己的指令来实现它，并且已经可以与现有的 ngSwitch 指令交互。

ngSwitchController 有一个属性cases是地图。每个 case 键都以 an 为前缀，!默认 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);
            });
        }
    }
});

示例插件： 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 回答
0

带有选项选择的 ng-switch 可能会有所帮助

<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>
于 2018-08-13T12:27:20.240 回答