Angularjs: ng-switch-when中的多个值

Question

我有以下ngSwitch:

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

如您所见，我有两个选项wrong和correct的文本Wrong。我试过(如你所见)使用管道|，但这不起作用。有什么建议吗?

Answer 1

为角祝辞= 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注意，根据我的经验，它不适用于数字……

Answer 2

这与使用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>

Live: http://jsfiddle.net/8yf15t2d/

Answer 3

一个ng-switch-when不能有多个条件

另一种选择是使用ng-if，但在错误处理的情况下，我更喜欢在控制器的作用域上填充错误变量，并使用ng-show=error。

Answer 4

您可以在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>

Answer 5

这不能通过angular的基本指令来实现，但是如果你愿意，你可以编写自己的指令来实现它，并且可以与现有的ngSwitch指令接口。

ngSwitchController有一个属性cases，它是一个映射。每个case键都以!为前缀，默认的case等于?。每个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);
            });
        }
    }
});

示例plunker: http://plnkr.co/edit/K9znnnFiVnKAgGccSlrQ?p=preview

Answer 6

您可以添加另一个开关箱

例子:

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

Answer 7

带选项选择的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>