angular指令ng-class巧用

什么是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。以此类推。

时间: 2024-08-15 06:54:33

angular指令ng-class巧用的相关文章

Angular(ng表单指令操作)

html部分 ................................................. <!DOCTYPE html><html lang="en" ng-app="myApp"><head> <meta charset="UTF-8"> <title>Angular(ng表单指令操作)</title> <script src="js

jquery函数转为angular指令实现示例

最初像想要实现的是:显示如下的小星星 最初的实现方式是在html页面加JS脚本,但是老外不喜欢这样,一定要我们转为angular指令,所以就试试呗~ 一.最初的实现方式 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta content="IE=edge,chrome=1&quo

angular中出现错误的提示指令[ng:areq]的原因

angular.min.js:80 Error: [ng:areq] http://errors.angularjs.org/1.2.9/ng/areq?p0=sellerService&p1=not%20a%20function%2C%20got%20undefined at angular.min.js:2 at ub (angular.min.js:14) at Pa (angular.min.js:14) at angular.min.js:57 at angular.min.js:45

angular指令大全

这篇文章的案例都是来自官方,引用的cdn来自bootcss, 因为angular的官方网站被屏了, 所以要翻, 不过我把整个文档下回来了,方便大家下载可以点击: 打开下载英文版 angular的指令 a标签(也就是html的锚标签): angular的所有事件直接绑定在元素的上,而且事件都是以“ng-****”开头,比如ng-click,ng-keydown,ng-keypress,ng-mouseover.... 基本的绑定事件代码, 点击a标签会触发该控制器内部$scope的alert事件;

angular指令(二)--内置指令

一.基础ng 属性指令: ? ng-href? ng-src? ng-disabled? ng-checked? ng-readonly? ng-selected? ng-class? ng-style 布尔属性的有: ng-disabled.ng-readonly.ng-checked.ng-selected 类布尔属性有: ng-href.ng-src 二.在指令中使用子作用域 ? ng-app ? ng-controller ? ng-include 使用ng-include可以加载.编译

angular指令中使用ngModelController

在这篇文章中 angular学习笔记(三十)-指令(10)-require和controller 说到了通过require属性和controller参数来让指令与指令之间互相交互. 本篇主要介绍的是指令与ngModel指令的交互.也就是说,ngModel指令虽然是内置的,但它也有自己的controller属性,其它指令也可以通过require来得到ngModel指令的controller属性的实例来与ngModel指令进行交互. ngModelController用在什么场合呢?我们知道,ngM

Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定

一放假就高产似母猪了. 00.混乱的前端界 Angular1.x确实是个学习成本很高的框架,刚开始实习那会儿,前端啥也不懂,工头说用Angular,我们这群小弟也只能硬着头皮学.在这之前,前端的东西大部分都用的jQuery,而Angular正好是和jQuery的思维是相反的,开发过程中遇到了不少坑.而Angular团队也放弃了1.x开始开发和React神似的2.0版本,唉,真是沧海桑田啊. 01.Angular vs jQuery Angular模块化和解耦的思路确实值得一学,但是相对于成熟的j

angular指令监听ng-repeat渲染完成后执行自定义事件方法

今天工作中遇到需要用到ng-repeat遍历渲染完后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己创建自定义指令. 在ng-repeat模板实例内部会暴露出一些特殊属性$index/$first/$middle/$last/$odd/$even,$index会随着每次遍历(从0开始)递增,当遍历到最后一个时,$last的值为true,所以可以通过判断$last的值来监听ng-repeat的执行状态, 怎么在遍历过程中拿到$last的值:自定义指令 v

【转】angular指令入坑

独立作用域和函数参数 通过使用本地作用域属性,你可以传递一个外部的函数参数(如定义在控制器$scope中的函数)到指令.这些使用&就可以完成.下面是一个例子,定义一个叫做add的本地作用域属性用来保存传入函数的引用: angular.module('directivesModule').directive('isolatedScopeWithController', function () {    return {        restrict: 'EA',        scope: {