• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >AngularJS > Angular ng-class详解及实例代码

Angular ng-class详解及实例代码

作者:破狼 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含angular js详解,angular实例,angular项目实例,angular.js实例,angular2项目实例等相关知识,破狼 希望在学习及工作中可以帮助到您

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

function ctr($scope){
  $scope.test =“classname”;
}

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

</div>

     这种方式完全没错,是angular提供的一种改变class的方式,但是在controller涉及了classname在我看来是乎总是那么诡异,我希望的是controller是一个干净的纯javascript意义的object。

在angular中为我们提供了3种方案处理class:

1:scope变量绑定,如上例。(不推荐使用)
2:字符串数组形式。
3:对象key/value处理。

我们继续其他两种解决方案:

1字符串数组形式是针对class简单变化,具有排斥性的变化,true是什么class,false是什么class,其形如;

function Ctr($scope) { 
  $scope.isActive = true;
}

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

</div>

其结果是2中组合,isActive表达式为true,则 active,负责inactive。

2对象key/value处理主要针对复杂的class混合,其形如:

function Ctr($scope) { 

}

<div ng-class {'selected': isSelected, 'car': isCar}">
</div> 


</div>

当 isSelected = true 则增加selected class,

当isCar=true,则增加car class,

所以你结果可能是4种组合。

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

以上就是对Angular ng-class详解,后续继续补充相关资料,谢谢大家对本站的支持!

</div>

您可能想查找下面的文章:

  • 详解Angular路由 ng-route和ui-router的区别
  • 详解Angular2中Input和Output用法及示例
  • Angular.JS中的this指向详解
  • 详解如何在Angular中快速定位DOM元素
  • Angular.js中ng-include用法及多标签页面的实现方式详解
  • Angular.js中控制器之间的传值详解
  • Angular中使用$watch监听object属性值的变化(详解)
  • 关于angular js_$watch监控属性和对象详解
  • Angular2数据绑定详解
  • Angular中ng-bind和ng-model的区别实例详解

相关文章

  • 2017-05-30angularjs 源码解析之scope
  • 2017-05-30详解angular中如何监控dom渲染完毕
  • 2017-05-30AngularJS 中的Promise --- $q服务详解
  • 2017-05-30Angular获取手机验证码实现移动端登录注册功能
  • 2017-05-30AngularJS基础 ng-options 指令详解
  • 2017-05-30AnjularJS中$scope和$rootScope的区别小结
  • 2017-05-30AngularJS入门教程之服务(Service)
  • 2017-05-30AngularJs expression详解及简单示例
  • 2017-05-30Angular2开发——组件规划篇
  • 2017-05-30angular forEach方法遍历源码解读

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 使用AngularJS2中的指令实现按钮的切换效果
    • AngularJS表单提交实例详解
    • AngularJS中$http使用的简单介绍
    • AngularJS路由实现页面跳转实例
    • angularJS深拷贝详解
    • Angularjs全局变量被作用域监听的正确姿势
    • AngularJs $parse、$eval和$observe、$watch详解
    • AngularJS手动表单验证
    • 基于AngularJS+HTML+Groovy实现登录功能
    • angularjs中使用ng-bind-html和ng-include的实例

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有