AngularJS ng-switch 指令

AngularJS 教程 · 2019-04-02 08:38:00

根据选中的值显示对应部分:

<div ng-switch="myVar">
  <div ng-switch-when="codercto">
     <h1>码农教程</h1>
     <p>欢迎访问码农教程</p>
  </div>
  <div ng-switch-when="google">
     <h1>Google</h1>
     <p>欢迎访问Google</p>
  </div>
  <div ng-switch-when="taobao">
     <h1>淘宝</h1>
     <p>欢迎访问淘宝</p>
  </div>
  <div ng-switch-default>
     <h1>切换</h1>
     <p>选择不同选项显示对应的值。</p>
  </div>
</div>

定义和用法

ng-switch 指令根据表达式显示或隐藏对应的部分。

对应的子元素使用 ng-switch-when 指令，如果匹配选中选择显示，其他为匹配的则移除。

你可以通过使用 ng-switch-default 指令设置默认选项，如果都没有匹配的情况，默认选项会显示。

语法

<element ng-switch="expression">
<element ng-switch-when="value"></element>
<element ng-switch-when="value"></element>
<element ng-switch-when="value"></element>
<element ng-switch-default></element>
</element>

<form> 元素支持该属性。

参数值

值	描述
expression	表达式会让匹配项显示，不匹配项移除。

点击查看所有 AngularJS 教程文章: https://codercto.com/courses/l/36.html

查看所有标签

码农书籍

创造突破性产品

Jonathan Cagan、Craig M.Vogel / 机械工业出版社 / 2004-1 / 35.00元

在《创造突破性产品:从产品策略到项目定案的创新》中作者总结多年的研究成果，指明了与产品创新相关的一系列因素，并提供了一套全新的开发突破性产品的理论与方法，该书旨在帮助企业，技术和设计人员：获得对用户的需求和市场新的趋势的准确洞察力；认识可以创造新市场的产品机会缺口；指导产品模糊前期的构造；正确地运用定性和定量的研究方法； ......一起来看看《创造突破性产品》这本书的介绍吧!

码农工具

话题

教程

Tips

namespace HelloWorld
{
    class Program
    {
        static void Main(string[] args)
        {
            System.Console.Write("Hello, World!");
        }
    }
}

AngularJS ng-switch 指令

定义和用法

语法

参数值

创造突破性产品

JS 压缩/解压工具

HTML 编码/解码

html转js在线工具