angularjs: ng-switch 내의 여러 값: 다음 경우

angularjs: ng-switch 내의 여러 값: 다음 경우

다음 ngSwitch가 있습니다.

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

보시는 바와 같이, 제가 본문은Wrong두 가지 옵션에 대해wrong그리고.correct(보시는 바와 같이) 파이프 사용을 시도했습니다.|근데 안 되네.좋은 의견이라도 있나?

angular >= v1.5.10의 경우,

다음을 추가하여 할 수 있습니다.ng-switch-when-separator="|"로.ng-switch-whennode. 문서의 예를 참조하십시오.

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

1개의 하드웨어로 여러 조건을 가질 수 없습니다.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 지시어와 이미 인터페이스 할 수도 있습니다.

ngSwitch Controller에는 1개의 속성이 있습니다.cases지도입니다.모든 케이스 키 앞에는!기본 대소문자는 다음과 같습니다.?. 각 케이스 값은 다음 두 가지 속성을 가진 객체입니다.transclude그리고.element.
경고:ngModelController와 달리 ngSwitchController는 공개된 API가 아니기 때문에 변경될 수 있습니다.

원래 ngSwitchWhenDirective를 기반으로 기존 ngSwitch, ngSwitchWhen 및 ngSwitchDefault 디렉티브와 경합 없이 동작하는 멀티스위치 When을 구축할 수 있습니다.

.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

다른 스위치 케이스를 추가할 수 있습니다.

예:

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

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>

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