Kątowy jest możliwy do użycia ngSwitch w zakresie numerycznym?

Question

Chciałbym użyć ngSwitch w oparciu o zakres wartości liczbowych.

Chciałbym pokazać trzy różne teksty na podstawie zmiany ngSwitch. Jednak nie mogę uzyskać tej pracy, gdy próbuję ustawić zakres wartości w ng-switch-when. Czy to możliwe, czy też powinienem użyć ngIf zamiast ngSwitch?

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

Answer 1

To nie jest możliwe.

W ngSwitch dyrektywa sprawdza czy wartość w ngSwitchWhen jest równe do jednej w ngSwitch. Zamiast tego można użyć ngShow lub ngIf jak zaproponowali:

<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

Jest to możliwe, ale trzeba zadeklarować funkcję pomocniczą w zakresie

W kontrolerze:

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

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

Jako .

Answer 3

Można użyć operatora trójskładnikowego z dyrektywą ng-init. W ten sposób:

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

Wygląda na kompleks, ale działa zgodnie z oczekiwaniami bez logiki widoku w kontrolerze.

Answer 4

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

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