什么是ng-class

ng-class最大的妙用就是可以根据你的逻辑表达式。来添加或移除对应的class

ng-class是angular.js里面内置的一个指令。

项目中，有时候，我们需要根据需求来切换不同的class

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

这种方式是scope变量绑定方式，个人觉得妙用谈不上，还不如直接写class=什么的

字符串方式，比较长用

function bu($scope) { $scope.ss= true;
}<div ng-class="{true: 'a', false: 'b'}[ss]"></div>

根据你的逻辑去切换 ss的true或者false，来显示对应的cass

对象key/valu处理

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

当 isSelected = true 则增加selected class，当isCar=true,则增加car class。以此类推。

转载于:https://www.cnblogs.com/null11/p/6136208.html

angular指令ng-class巧用相关推荐

Angular指令 - 何时以及如何使用编译，控制器，预链接和后链接[关闭]
本文翻译自:Angular directives - when and how to use compile, controller, pre-link and post-link [closed] ...
angular指令：tm.tags添加/删除标签
一个添加删除标签angular指令: 在网上找了几个标签插件都不是angular的,而且过于庞大,最小的也要30kb还引用了其他样式. 最后实在受不了自己写了,花4个小时找插件,最后自己2小时写完了. ...
angular 指令
Angular 指令的不同类型如下: 组件 -- 带有模板的指令.这种指令类型是最常见的指令类型. 属性型指令 -- 更改元素.组件或其他指令的外观或行为的指令. 结构型指令 -- 通过添加和删除 D ...
angular指令心得（ng-model）
angular指令心得(ng-model) 在项目中编写指令,常常会依赖其他的指令来实现想要达到的功能,其中最常用到的便是ng-model,它为我们明确了需要绑定的属性,虽然在指令中可以通过通过使用独 ...
Angular指令渗透式理解
通过一段时间对angular指令的使用,理解了angular指令的意义,下面逐一介绍一下. ng-app:定义一个angualr模块,表示angular作用的范围,如下代码: ng-app在html标 ...
Angular 常用ng指令详解
详解Angular ng内置指令我们依次从使用频率高到低来,重要性大小来说明各种指令. 1.ng-repeat 1.1 一般用法 <ul><li ng-repeat="c ...
Angular常用ng指令详解
我们依次从使用频率高到低来,重要性大小来说明各种指令. 1.ng-repeat 1.1一般用法 <ul><li ng-repeat="char in [{'alphabet ...
Angular CLI ng 指令指南
Angular CLI 使用教程指南参考 Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本. 安装
angular 指令渲染_Angular JS指令有后期渲染回调吗？
我刚刚得到指令,将模板插入到其元素中,如下所示: # CoffeeScript .directive 'dashboardTable', -> controller: lineItemIndex ...

angular指令ng-class巧用

什么是ng-class

字符串方式，比较长用

对象key/valu处理

angular指令ng-class巧用相关推荐

最新文章

热门文章