• ng-class的几种用法


    参考来自 https://www.cnblogs.com/zhoulin1234/p/9587955.html

    方法1. 逻辑在后面的中括号里面

     ng-class="{true : 'checker disabled',false : 'checker' }[条件表达式,成立就用true对应的类,不成立就用false对应的类]"
    

    方法2. key为class, 成立条件为对应的value 为true。就是说 下面例子 中 item.disab为true 就成立,即CSS中 checker disabled有效

    ng-class="{'checker disabled' : item.disab, 'checker' : !item.disab}"
    

    方法3. 用{{ }} 包着表达式 不推荐,这样样式跑到controller里面去了,混杂

    ng-class="{{bClass}}”
    
    $scope.bClass = "{'red':true,'green':false}"
    

    方法4. 直接加变量

    ng-class="tempClass" , 配合ng-model = "tempClass"

    示例代码:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
    <style>
    .sky {
        color:white;
        background-color:lightblue;
        padding:20px;
        font-family:"Courier New";
    }
    .tomato {
        background-color:coral;
        padding:40px;
        font-family:Verdana;
    }
    .noabc{
     100px;
    height: 100px;
    background-color: red;
    }
    .abc{
     500px;
    height: 500px;
    background-color: skyblue;
    }
    </style>
    </head>
    <body ng-app="">
    
    <p>选择一个类:</p>
    
    <select ng-model="home">
    <option value="sky">天空色</option>
    <option value="tomato">番茄色</option>
    </select>
    
    <div ng-class="home">
      <h1>Welcome Home!</h1>
      <p>I like it!</p>
    </div>
        
    <div class="noabc" ng-class="{true:'abc',false:''}[1==1.0]">
    <span ng-class="">ng-class绑定一个对象</span>
    </div>
    
    </body>
    </html>
    

     
    
    
    
    此文仅为鄙人学习笔记之用,朋友你来了,如有不明白或者建议又或者想给我指点一二,请私信我。liuw_flexi@163.com/QQ群:582039935. 我的gitHub: (学习代码都在gitHub) https://github.com/nwgdegitHub/
  • 相关阅读:
    C# DataSet导出Excel
    MVC学习十四:MVC 路由 Route
    【Ubuntu 16.04.2_64】安装配置SVN
    【Java Web开发学习】Spring MVC 使用HTTP信息转换器
    【Git】常用命令
    【Git】安装配置
    【Git】学习开始
    【JPA】映射
    【JPA】字段访问、属性访问及混合访问
    【JPA】注解@PostConstruct、@PreDestroy
  • 原文地址:https://www.cnblogs.com/liuw-flexi/p/11981685.html
Copyright © 2020-2023  润新知