zoukankan      html  css  js  c++  java
  • 12.ng-switch

    转自:https://www.cnblogs.com/best/tag/Angular/

    根据作用域表达式动态切换把那个DOM元素包含在已经编译的模板中。

    示例代码:

    复制代码
    <!DOCTYPE html>
    <!--指定angular管理的范围-->
    <html ng-app="app01">
    
        <head>
            <meta charset="UTF-8">
            <title>指令</title>
        </head>
    
        <body>
            <!--指定控制器的作用范围-->
            <form ng-controller="Controller1" name="form1" ng-init="color='orangered'">
                请输入颜色:<input ng-model="color" />
                <p ng-switch="color" ng-style="{'color':color}">
                    <span ng-switch-when="red">红色</span>
                    <span ng-switch-when="green">绿色</span>
                    <span ng-switch-when="blue">蓝色</span>
                    <span ng-switch-default>输入错误,请输入red,green,blue</span>
                </p>
            </form>
            <!--引入angularjs框架-->
            <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                //定义模块,指定依赖项为空
                var app01 = angular.module("app01", []);
                //定义控制器,指定控制器的名称,$scope是全局对象
                app01.controller("Controller1", function($scope) {});
            </script>
        </body>
    
    </html>
    复制代码

    运行结果:

  • 相关阅读:
    20200929-git地址
    20200917-1 每周例行报告
    20200917-2 词频统计
    20200917-3 白名单
    20200910-1 每周例行报告
    20200910-2 博客作业
    20190919-6 四则运算试题生成,结对
    20190919-3 效能分析
    20190919-2 功能测试
    20190912-1 每周例行报告
  • 原文地址:https://www.cnblogs.com/sharpest/p/8126825.html
Copyright © 2011-2022 走看看