AngularJS 中使用 ng-switch-when 判断不同条件-JavaScript中文网-JavaScript教程资源分享门户

在 AngularJS 中，ng-switch-when 指令可以根据条件值判断不同的情况，并显示相应的内容。这个指令可以帮助我们更加灵活地控制页面的显示和交互，提高用户体验和开发效率。

ng-switch-when 的基本用法

ng-switch-when 指令需要和 ng-switch 指令一起使用，用于指定不同的条件值和对应的显示内容。具体的用法如下：

<div ng-switch="condition">
  <div ng-switch-when="value1">显示内容1</div>
  <div ng-switch-when="value2">显示内容2</div>
  <<div ng-switch-default>默认显示内容</div>
</div>

其中，ng-switch 指令需要绑定一个条件值，可以是一个变量、表达式或者函数的返回值。ng-switch-when 指令则需要指定一个具体的条件值，当条件值和 ng-switch 指令绑定的值相等时，对应的显示内容就会被显示出来。如果没有匹配的条件值，则会显示 ng-switch-default 指令指定的默认内容。

ng-switch-when 的高级用法

除了基本用法之外，ng-switch-when 指令还支持一些高级用法，可以更加灵活地控制页面的显示和交互。下面我们来介绍一些比较常用的高级用法。

多个条件值的判断

ng-switch-when 指令可以同时指定多个条件值，用逗号隔开即可。当条件值中任意一个和 ng-switch 指令绑定的值相等时，对应的显示内容就会被显示出来。

<div ng-switch="condition">
  <div ng-switch-when="value1, value2">显示内容1</div>
  <div ng-switch-when="value3">显示内容2</div>
  <<div ng-switch-default>默认显示内容</div>
</div>

表达式的判断

ng-switch-when 指令还可以支持表达式的判断，可以根据表达式的返回值来判断是否显示对应的内容。

<div ng-switch="condition">
  <div ng-switch-when="value1 === 'abc'">显示内容1</div>
  <div ng-switch-when="value2 > 10">显示内容2</div>
  <div ng-switch-default>默认显示内容</div>
</div>

函数的判断

ng-switch-when 指令还可以支持函数的判断，可以根据函数的返回值来判断是否显示对应的内容。

<div ng-switch="condition">
  <div ng-switch-when="isShow()">显示内容1</div>
  <div ng-switch-default>默认显示内容</div>
</div>

其中，isShow() 是一个函数，它的返回值可以是 true 或者 false，根据返回值来判断是否显示对应的内容。

示例代码

下面是一个简单的示例代码，演示了 ng-switch-when 指令的基本用法和高级用法。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>AngularJS ng-switch-when 示例</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
  <div ng-switch="condition">
    <div ng-switch-when="value1">显示内容1</div>
    <div ng-switch-when="value2">显示内容2</div>
    <div ng-switch-when="value1, value2">显示内容3</div>
    <div ng-switch-when="value3">显示内容4</div>
    <div ng-switch-when="value4">显示内容5</div>
    <div ng-switch-when="value5">显示内容6</div>
    <div ng-switch-when="value6">显示内容7</div>
    <div ng-switch-when="value7">显示内容8</div>
    <div ng-switch-when="value8">显示内容9</div>
    <div ng-switch-when="value9">显示内容10</div>
    <div ng-switch-when="value1 === 'abc'">显示内容11</div>
    <div ng-switch-when="value2 > 10">显示内容12</div>
    <div ng-switch-when="isShow()">显示内容13</div>
    <div ng-switch-default>默认显示内容</div>
  </div>
  <script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope) {
      $scope.condition = "value3";
      $scope.isShow = function() {
        return true;
      };
    });
  </script>
</body>
</html>

在这个示例代码中，我们定义了一个 ng-switch 指令和多个 ng-switch-when 指令，用于判断不同的条件值，并显示对应的内容。同时，我们也演示了 ng-switch-when 指令的高级用法，包括多个条件值的判断、表达式的判断和函数的判断。通过这个示例代码，我们可以更加深入地理解和掌握 ng-switch-when 指令的使用方法。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d28779a941bf71344c77db

AngularJS 中使用 ng-switch-when 判断不同条件