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,

  • 相关阅读:
    第k短路
    Codeforces Round #608 (Div. 2)
    Codeforces Round #606 E(无向图求pair(x,y)x到y的任意路径一定经过定点a和b的数量)
    Codeforces Round #603 (Div. 2)E
    题解报告:hdu 2717 Catch That Cow(bfs)
    题解报告:poj 3669 Meteor Shower(bfs)
    题解报告:poj 1321 棋盘问题(dfs)
    题解报告:hdu 1312 Red and Black(简单dfs)
    题解报告:poj 1426 Find The Multiple(bfs、dfs)
    hdu 4704 Sum(扩展欧拉定理)
  • 原文地址:https://www.cnblogs.com/leejersey/p/4538056.html
Copyright © 2011-2022 走看看