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

  • 相关阅读:
    .Net 中double相加的困惑
    关于内存资源消耗快的问题
    内存资源消耗快的问题
    跨线程更新窗体
    .Net实现双缓冲
    TypeConverter
    emf文件的导入
    在资源中存放图象与emf文件的显示
    笔记java中nextLine方法没有输入就跳过了
    Silverlight Triggers、Actions 和 Behaviors
  • 原文地址:https://www.cnblogs.com/dannyxie/p/5522928.html
Copyright © 2020-2023  润新知