当前位置：首页 > 资讯 > 技术文档

AngularJS中ng-class用法实例分析

时间：2022-04-08 06:32 编辑：来源：阅读：
扫一扫，手机访问

摘要：AngularJS中ng-class用法实例分析

本文实例讲述了AngularJS中ng-class用法。分享给大家供大家参考，具体如下：使用 ng-class 动态设置元素的类，方法是绑定一个代表所有需要添加的类的表达式。重复的类不会添加。当表达式发生变化，先前添加的类会被移除，新类会被添加。在angular中为我们提供了3种方案： ① 通过数据的双向绑定（不推荐使用） ② 通过对象数组。 ③ 通过key/value [b]一、通过数据双向绑定：[/b]

function changeClass(){
 $scope.className = "change2";
}
<div class="{{className}}"></div>

[b]二、通过字符串数组的形式来改变[/b]

<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>

[b]三、通过key/value[/b]

function Ctr($scope) {
}
<div ng-class {'selected': isSelected, 'car': isCar}">
</div>

[b]说明：[/b]当isSelected为真的时候则添加class ‘selected' 当isCar为真的时候则添加class ‘car' 更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《[url=http://www.1sucai.cn/Special/919.htm]AngularJS指令操作技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/893.htm]AngularJS入门与进阶教程[/url]》及《[url=http://www.1sucai.cn/Special/898.htm]AngularJS MVC架构总结[/url]》希望本文所述对大家AngularJS程序设计有所帮助。

全部评论(0)

上一篇：DAM 简单跨数据库ADO.NET组件
下一篇：详解Angular4中路由Router类的跳转navigate

资讯排行榜
更多>>