Question

我想根据数值范围使用ngSwitch。

我想基于ngSwitch更改显示三个不同的文本。但是，当我尝试在ng-switch-when中设置值范围时，我无法完成这项工作。这是可能的，还是应该使用ngIf而不是ngSwitch？

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>

Angular可以在数值范围内使用ngSwitch吗？

4 个答案: