详解angularJs中关于ng-class的三种使用方式说明

更新时间：2017年06月02日 10:13:15 作者：渐行渐远_

本篇文章主要介绍了angularJs中关于ng-class的三种使用方式说明，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

在开发中我们通常会遇到一种需求：一个元素在不同的状态需要展现不同的样子。

而在这所谓的样子当然就是改变其css的属性，而实现能动态的改变其属性值，必然只能是更换其class属性

这里有三种方法：

第一种：通过数据的双向绑定（不推荐）

第二种：通过对象数组

第三种：通过key/value( 推荐 )

下面简单说下这三种：

第一种：通过数据的双向绑定

实现方式：

function changeClass(){
 $scope.className = "change2";
}

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

网上各种不推荐，说实话，既然angularJS双向数据绑定这么吊，为什么不能通过这个来改变呢！查了下原由：“在controller涉及了classname在我看来是乎总是那么诡异，我希望的是controller是一个干净的纯javascript意义的object”，当然并没有明文固定不能够这么使用的，而且反而我觉得这样非常的方便，让html中元素想怎么变就怎么变！同理中的img元素中的src就不可以通过别的来改变，但是通过这种方式就是可以的！

当然，这种方式也的确给人的感觉怪怪的，个人认为：可以不得已而为之~

第二种：通过字符串数组的形式来改变

实现方式：

function changeClass(){
 $scope.className = true/false;
}
 
<div ng-class="{true:'zhende',false:'jiade'}[className]"></div>

实现很简单，就是当className为真的时候class为zhende，相反则为jiade。

但是有一点不好的只能够让一个元素拥有两种状态，虽然这么说！基本也是满足所需了，我一般都用这个。简单、直观！

第三种：通过key/value的方式

实现方式：

function changeClass(){
 $scope.lala = true;
}
 
<div ng-class="{'selectClass':select,'choiceClass':choice,'haha':lala}"></div>

当lala为true的时候，class则为haha，个人认为这个是比较推荐的，可以弥补第二种方式的点点遗憾~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

彻底学会Angular.js中的transclusion
这篇文章主要给大家介绍Angular.js中transclusion的相关资料，希望通过这一篇文章大家能够弄懂Angular.js中的transclusion，文中介绍的很详细，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-03-03
angular同一页面跳转重新执行的实现方法
这篇文章主要介绍了angular同一页面跳转重新执行的实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
AngularJS控制器之间的数据共享及通信详解
本文详细介绍了AngularJS控制器之间的数据共享与通信，对angularjs共享数据及通信相关知识感兴趣的朋友可以一起学习。
2016-08-08
详解AngularJS ui-sref的简单使用
本篇文章主要介绍了详解AngularJS ui-sref的简单使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-04-04
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Swiper是目前较为流行的移动端触摸滑动插件，因为其简单好用易上手，受到很多前端开发者的欢迎。这篇文章主要介绍了AngularJS 中使用Swiper制作滚动图不能滑动的解决方法,需要的朋友可以参考下
2016-11-11
Angular ElementRef简介及其使用
这篇文章主要介绍了Angular ElementRef简介及其使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
AngularJS入门教程引导程序
本文主要介绍AngularJS 引导程序,这里整理了相关资料及示例代码，详细讲解了引导程序的知识要点，有兴趣的小伙伴可以参考下
2016-08-08
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
这篇文章主要介绍了AngularJS与服务器Ajax交互操作的方法,可实现post传输数据的功能,并附带完整的demo源码供读者下载参考,源码中还包含了前面章节的示例文件,需要的朋友可以参考下
2016-11-11
Angular弹出模态框的两种方式
这篇文章主要介绍了Angular弹出模态框的两种方式,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-10-10
Angular4学习笔记之实现绑定和分包
本篇文章主要介绍了Angular4学习笔记之实现绑定和分包，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08