Угловой можно использовать ngSwitch в числовом диапазоне?

Question

Я хотел бы использовать ngSwitch на основе числового диапазона значений.

Я хотел бы показать три разных текста, основанных на изменении ngSwitch. Однако я не могу получить эту работу, когда я пытаюсь установить диапазон значений в ng-switch-when. Возможно ли это, или я должен использовать ngIf вместо ngSwitch?

http://jsbin.com/eWIQoJE/1/edit

Answer 1

Это не возможно.

В ngSwitch директива проверяет, является ли значение в ngSwitchWhen является равного к одному в ngSwitch. Вместо этого, вы можете использовать ngShow или ngIf как вы предложили:

<div ng-if="test === 0">Is zero</div> 
<div ng-if="test > 10">Is greater than 10</div> 
<div ng-if="!(test === 0 || test > 10)">Default</div> 

JSBin

Answer 2

Это возможно, но вы должны объявить вспомогательную функцию в рамках

В контроллере:

$scope.switchHelper = function(value) { 
    if (value === 0) 
    return 0; 
    if (value > 10) 
    return 1; 
    if (!(value === 0 || test)) 
    return 3; 
}; 

А в HTML:

<div ng-switch="switchHelper(test)"> 
    <div ng-switch-when="0">Is zero</div> 
    <div ng-switch-when="1">Is greater than 10</div> 
    <div ng-switch-when="3">Default</div> 
</div> 

JSBin.

Answer 3

Вы можете использовать тройной оператор с ng-init. Например:

<div ng-init="value = (test == 0 ? 0 : (test > 10 ? 1 : null))" ng-switch="value"> 
    <div ng-switch-when="0">Is zero</div> 
    <div ng-switch-when="1">Is greater than 10</div> 
    <div ng-switch-default>Default</div> 
</div> 

Похоже на комплекс, но работает как ожидается, без логики представления в контроллере.

Answer 4

В Javascript

app.controller('numberCtrl', function ($scope) { 
 
    $scope.someNum = 0; 
 
    $scope.someVal = 0; 
 

 
    $scope.updateVal = function() { 
 
     if (($scope.someNum >= 1) && ($scope.someNum <= 5)) { 
 
      $scope.someVal = 1; 
 
     } else { 
 
      $scope.someVal = 0; 
 
     } 
 
    } 
 
});

В HTML

<div ng-controller="numberCtrl"> 
 
      <label>Enter a value from 1 to 5</label> 
 
      <input type="text" ng-model="someNum" ng-change="updateVal()" /> 
 
      <div ng-switch="someVal"> 
 
       <p ng-switch-when="1">You entered {{someNum}}</p> 
 
       <p ng-switch-when="0">Invalid input</p> 
 
      </div>   
 
     </div>