ng-class2

Angular ng-class 示例

最新推荐文章于 2020-04-28 15:26:43 发布

原创最新推荐文章于 2020-04-28 15:26:43 发布 · 376 阅读

0 ·

CC 4.0 BY-SA版权

流行框架node 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一个使用 Angular 的 ng-class 指令实现颜色切换的例子。通过下拉菜单选择不同的背景颜色，页面上的 div 元素将平滑过渡到所选颜色。

<!DOCTYPE html>
<html lang="en" ng-app>
    <head>
        <meta charset="utf-8">
        <title>ng-class2 </title>
        <style>
            .red{background-color:#001122;}
            .green{background-color:gray;}
            #box{
                width: 200px;
                height: 200px;
                transition:background-color 1s ease;
            }
        </style>
    </head>
    <body>
        <select ng-model="style" id="">
            <option value="red">红色</option>      
            <option value="green">绿色</option>      
        </select>
        <!-- <div id="box" ng-class="style"></div> -->
        <div id="box" ng-class="{red:style=='red',green:style=='green'}"></div>
        <script src="bower_components/angular/angular.js"></script>

    </body>
</html>