zoukankan      html  css  js  c++  java
  • Angularjs中的ng-class

    在angular中为我们提供了3种方案处理class:
    1:scope变量绑定。(不推荐使用)
    2:字符串数组形式。
    3:对象key/value处理。

    我们继续其他两种解决方案:
    1字符串数组形式是针对class简单变化,具有排斥性的变化,true是什么class,false是什么class,其形如:

    复制代码
    <!DOCTYPE html>
    <html lang="en" ng-app="">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
        .active{background: green}
        .active{background: red}
        </style>
    </head>
    <body>
        <div ng-controller="Aaa">
            <div ng-class="{ true: 'active', false: 'inactive'}[isActive]">
                11111
            </div>
        </div>
        <script type="text/javascript" src="angular.min.js"></script>
        <script type="text/javascript">
        function Aaa($scope){
            $scope.isActive=true;
        }
        </script>
    </body>
    </html>
    复制代码

    其结果是2中组合,isActive表达式为true,则 active,负责inactive。

    扩展:

    复制代码
    <!DOCTYPE html>
    <html lang="en" ng-app="">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
        .active{background: green}
        .inactive{background: red}
        </style>
    </head>
    <body>
        <div ng-controller="Aaa">
            <div ng-class="{ true: 'active', false: 'inactive'}[isActive]" ng-click="change()">
                11111
            </div>
        </div>
        <script type="text/javascript" src="angular.min.js"></script>
        <script type="text/javascript">
        function Aaa($scope){
            $scope.isActive=true;
            $scope.change=function(){
                $scope.isActive=!$scope.isActive
            }
        }
        </script>
    </body>
    </html>
    复制代码

    这种方法做到了class之间简单的切换

    2对象key/value处理主要针对复杂的class混合,其形如:

    复制代码
    <!DOCTYPE html>
    <html lang="en" ng-app="">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
        .selected{background: green}
        .car{border:1px solid red}
        </style>
    </head>
    <body>
        <div ng-controller="Aaa">
            <div ng-class="{'selected' : isSelected, 'car' : isCar}">
                11111
            </div>
        </div>
        <script type="text/javascript" src="angular.min.js"></script>
        <script type="text/javascript">
        function Aaa($scope){
            $scope.isSelected=true;
            $scope.isCar=true;
        }
        </script>
    </body>
    </html>
    复制代码

    当 isSelected = true 则增加selected class,
    当isCar=true,则增加car class,

  • 相关阅读:
    我不想写题解的题们
    [清华集训2012]模积和
    2013杭电warm up1 Rotation Lock Puzzle
    2013杭电warm_up1 1010 Difference Between Primes
    2013 Multi-University Training Contest 3 (g) The Unsolvable Problem
    2013杭电warm up1 1002 Pet 求树结点的高度
    hdu 3789 奥运排序问题 模拟
    13杭电warmup1 1001 Children's Day
    2013杭州网络预选赛 1004 Save Labman No.004 求异面直线之间距离
    2013成都网络预选赛 1010 A Bit Fun
  • 原文地址:https://www.cnblogs.com/susanws/p/5476794.html
Copyright © 2011-2022 走看看