AngularJS中ng-class用法实例分析
更新时间：2017年07月06日 10:36:16 作者：Annexu1991
这篇文章主要介绍了AngularJS中ng-class用法,结合实例形式分析了ng-class的功能、使用方法与相关注意事项,需要的朋友可以参考下
本文实例讲述了AngularJS中ng-class用法。分享给大家供大家参考，具体如下：
使用 ng-class 动态设置元素的类，方法是绑定一个代表所有需要添加的类的表达式。重复的类不会添加。当表达式发生变化，先前添加的类会被移除，新类会被添加。
在angular中为我们提供了3种方案：
① 通过数据的双向绑定（不推荐使用）
② 通过对象数组。
③ 通过key/value
一、通过数据双向绑定：
function changeClass(){
$scope.className = "change2";
}
<div class="{{className}}"></div>
二、通过字符串数组的形式来改变
<div ng-controller="firstController">
<div ng-class="{true:'change1',false:'change2'}[className]"></div>
</div>
<script>
var app=angular.module("myModule",[])
app.controller('firstController',function($scope){
$scope.className=true;
})
</script>
三、通过key/value
function Ctr($scope) {
}
<div ng-class {'selected': isSelected, 'car': isCar}">
</div>
说明：当isSelected为真的时候则添加class ‘selected' 当isCar为真的时候则添加class ‘car'
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
相关文章
本篇文章主要介绍了浅析Angular2子模块以及异步加载，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
今天小编就为大家分享一篇解决angular2 获取到的数据无法实时更新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了AngularJS实现表格的增删改查，仅限前端，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了使用AngularJS 跨站请求如何解决jsonp请求问题，下面通过本文给大家分享解决办法，需要的朋友参考下2017-01-01
这篇文章主要为大家介绍了Angular的FormArray和模态框结合使用实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了AngularJS中实现用户访问的身份认证及表单验证功能的方法,Angular是Google开发的一款浏览器端的高人气JavaScript框架,需要的朋友可以参考下2016-04-04
Angular2 组件间通过@Input @Output通讯示例
本篇文章主要介绍了Angular2 组件间通过@Input @Output通讯示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要给大家介绍了关于Angular项目如何升级至Angular6的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-09-09
这篇文章主要介绍了Angularjs的键盘事件的绑定的相关资料,这里提供了两种方法，1.ng内置指令，2.自定义指令，并进行比较，需要的朋友可以参考下2017-07-07
Angular2+国际化方案（ngx-translate）的示例代码
本篇文章主要介绍了Angular2+国际化方案（ngx-translate）的示例代码，具有一定的参考价值，有兴趣的可以了解一下2017-08-08
最新评论