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上的只能是数据和行为。

  • 相关阅读:
    任务18格式化
    任务17分区
    任务16 BIOS与CMOS
    任务15硬件组装过程说明
    任务14选配机箱
    任务13选配电源
    任务12选配显卡
    任务11选配机械硬盘
    任务10选配固态硬盘
    Android自定义控件:动画类(八)----ObjectAnimator基本使用
  • 原文地址:https://www.cnblogs.com/dannyxie/p/5522928.html
Copyright © 2011-2022 走看看