zoukankan      html  css  js  c++  java
  • ng-class用法小记

    angularJS为我们提供了3种方案处理class:

      1:scope变量绑定(不推荐使用);//controller涉及了classname,作者希望的是controller是一个干净的纯javascript意义的object。
      2:字符串数组形式;(针对class简单变化,具有排斥性的变化)
      3:对象key/value处理;(主要针对复杂的class混合)

    代码如下:

      a:function name($scope){

        $scope.test="className";  

      }

      <div class="{{test}}"></div>

      b:function name($scope){

        $scope.isActive=true;

      }

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

      

      c:function name($scope){

      }

      <div ng-class="{'selected':isSelected,'car':isCar}"></div>//当 isSelected = true 则增加selected class,当isCar=true,则增加car class,所以你结果可能是4种组合。

      在前面Angularjs开发一些经验总结中我们说到在angular开发中angular controller never 包含DOM元素(html/css),在controller需要一个简单的POJO(plain object javascript object),与view完全的隔离(交互angularjs框架的职责。但在某些项目中看见controller涉及DOM的元素最多的是在controller scope上定义某变量,其值为class name,形如方法a。

      参考链接http://www.cnblogs.com/whitewolf/archive/2013/05/22/3092184.html

    ---恢复内容结束---

    angularJS为我们提供了3种方案处理class:
      1:scope变量绑定(不推荐使用);//controller涉及了classname,作者希望的是controller是一个干净的纯javascript意义的object。
      2:字符串数组形式;(针对class简单变化,具有排斥性的变化)
      3:对象key/value处理;(主要针对复杂的class混合)

    代码如下:

      a:function name($scope){

        $scope.test="className";  

      }

      <div class="{{test}}"></div>

      b:function name($scope){

        $scope.isActive=true;

      }

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

      

      c:function name($scope){

      }

      <div ng-class="{'selected':isSelected,'car':isCar}"></div>//当 isSelected = true 则增加selected class,当isCar=true,则增加car class,所以你结果可能是4种组合。

      在前面Angularjs开发一些经验总结中我们说到在angular开发中angular controller never 包含DOM元素(html/css),在controller需要一个简单的POJO(plain object javascript object),与view完全的隔离(交互angularjs框架的职责。但在某些项目中看见controller涉及DOM的元素最多的是在controller scope上定义某变量,其值为class name,形如方法a。

      参考链接http://www.cnblogs.com/whitewolf/archive/2013/05/22/3092184.html

  • 相关阅读:
    canvas学习-----1px线条模糊问题
    canvas学习-----画直线
    关于开发的一些流程和个人理解
    vue+vue-cli+vuex+vrouter 开发学习和总结
    mac下配置Apache虚拟域名方案,以及遇到的坑
    添加js,css 版本号?v= hash
    webstorm 格式化代码及常用快捷键
    vue+webpack 遇到的问题总结
    vue.js的devtools安装
    Mongodb 新版配置文件详解
  • 原文地址:https://www.cnblogs.com/xtping/p/5076368.html
Copyright © 2011-2022 走看看