angularjs : ng-switch-when의 여러 값

angularjs : ng-switch-when의 여러 값

---

다음 ngSwitch가 있습니다.

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

보시다시피, Wrong두 가지 옵션 wrong및 correct. 나는 (보시다시피) 파이프를 사용하려고 시도했지만 |작동하지 않습니다. 어떤 제안?

---

각도> = 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 참고, 내 경험에 따르면 숫자로는 작동하지 않습니다 ... 아직?

---

이것은 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/

---

하나의 ng-switch-when.

한 가지 대안은를 사용하는 ng-if것이지만 오류 처리의 경우 컨트롤러의 범위에 오류 변수를 채우고 ng-show=error.

---

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>

---

이것은 angular의 기본 지시문으로는 달성 할 수 없지만 원하는 경우이를 구현하기 위해 고유 한 지시문을 작성할 수 있으며 기존 ngSwitch 지시문과 이미 인터페이스 할 수 있습니다.

ngSwitchController has one property cases which is a map. Every case key is prefixed with an ! and the default case is equal to ?. Each case value is an object with two properties: transclude and element.
Warning: Unlike ngModelController, ngSwitchController is not published API, so it's subject to change.

Based off of the original ngSwitchWhenDirective, we can construct a multiswitchWhen, that will work with all existing ngSwitch, ngSwitchWhen, and ngSwitchDefault directives without conflict.

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

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

---

You can add another switch case.

Example:

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

Live example: http://jsfiddle.net/choroshin/Zt2qE/2/

---

ng-switch with option selection may help

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

참고URL : https://stackoverflow.com/questions/22610543/angularjs-multiple-values-in-a-ng-switch-when