Question

以下是我想要做的简化版本。

    <div ng-switch on='stepNumber' >
       <div ng-switch-when="1" ng-switch-when="2" ng-switch-when="3" >One, Two, Three</div>
       <div ng-switch-when="4" >Four</div>
       <div ng-switch-when="5" ng-switch-when="10">Five, Ten</div>
    </div>

复杂的版本似乎不起作用，代码会让人们感到困惑。

Answer 1

您需要为每个条件为ng-switch-when编写单独的元素：

PLUNKER

Step Number: <input type="text" ng-model="stepNumber">

<div ng-switch on="stepNumber">
  <div ng-switch-when="1">One, Two, Three</div>
  <div ng-switch-when="2">One, Two, Three</div>
  <div ng-switch-when="3">One, Two, Three</div>
  <div ng-switch-when="4">Four</div>
  <div ng-switch-when="5">Five, Ten</div>
  <div ng-switch-when="10">Five, Ten</div>
</div>

_{注意：这需要AngularJS v1.1.3 +}

或者，如果您使用AngularJS v.1.1.5 +而不是ngIf可能是更清洁的解决方案：

PLUNKER

步骤编号：

Step Number: <input type="text" ng-model="stepNumber">

<div ng-if="stepNumberWithin(['1', '2', '3'], stepNumber)">One, Two, Three</div>
<div ng-if="stepNumberWithin(['4'], stepNumber)">Four</div>
<div ng-if="stepNumberWithin(['5', '10'], stepNumber)">Five, Ten</div>

myApp.controller('MyCtrl', function($scope) {

  $scope.stepNumberWithin = function(arr, number){
    console.log(arr, number);
    return arr.indexOf(number) !== -1;
  }

});

单个HTML标记中的多个ng-switch-when指令

1 个答案: