zoukankan      html  css  js  c++  java
  • angular的ngclass

    项目内想到要替换class时,第一反应是使用angular最为简单粗暴的class改变方式;

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

    1.scope变量绑定

    
    
    $scope.test =“classname”;
    <div class=”{{test}}”></div>

         这种方式虽然可以,但是在controller中出现了class总是显得奇怪,在angular的思想里面controller应该保持纯洁的js。

        2.字符串数组形式。

      当isActive=true时,class是active,isActive=false时为空,

    
    
     $scope.isActive = true;
    <div ng-class="{true: 'active', false: ''}[isActive]"> </div>

        3.对象key/value处理主要针对复杂的class混合。

      当 isSelected = true 则增加selected class,当isCar=true,则增加car class,所以你结果可能是4种组合。

    
    
    $scope.isSelected=true;
    <div ng-class {'selected': isSelected, 'car': isCar}"> </div>

        当 isSelected = true 则增加selected class,
        当isCar=true,则增加car class,
        所以你结果可能是4种组合。

        个人推荐用2,3两种方式,不建议将class放入controller scope之上,scope需要保持纯洁行,scope上的只能是数据和行为。

  • 相关阅读:
    C#单例模式的三种写法
    【TFS】增加组员,以及用户权限分配
    Mongodb实用网址记录
    关于JS 对象与JSON对象
    多线程操作
    检测到有潜在危险的 Request.Form 值
    JavaScript 【正则表达式验证数字代码】
    【SQL】大杂烩
    IE 中创建 子窗口 传值 与接收值 【window.showModalDialog】
    UITabbarView Tabbar
  • 原文地址:https://www.cnblogs.com/dannyxie/p/5522928.html
Copyright © 2011-2022 走看看