展开

关键词

Angular ng-class的小细节

但在某些项目中看见controller涉及DOM的元素最多的是在controller scope上定义某变量,其值为class name,形如: function ctr($scope){ $scope.test =“classname”;}      这种方式完全没错,是angular提供的一种改变class的方式,但是在controller涉及了classname在我看来是乎总是那么诡异,我希望的是controller 在angular中为我们提供了3种方案处理class:1:scope变量绑定,如上例。(不推荐使用)2:字符串数组形式。3:对象keyvalue处理。 我们继续其他两种解决方案:1字符串数组形式是针对class简单变化,具有排斥性的变化,true是什么class,false是什么class,其形如;function Ctr($scope) { $scope.isActive 2对象keyvalue处理主要针对复杂的class混合,其形如:function Ctr($scope) { }

25120

Angularjs基础(十)

ng-class 描述:指定HTML 元素使用的CSS 类。          ng-class-even 描述:类似ng-class,但只在偶数行起作用。          ng-class-even 指令需要 与ng-repeat 指令搭配使用。            ng-class-odd 类似ng-class,但只在奇数行起作用。          ng-class-odd 指令需要 与ng-repeat 指令搭配使用。

29450
  • 广告
    关闭

    腾讯云前端性能优化大赛

    首屏耗时优化比拼,赢千元大奖

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    走进AngularJs(二) ng模板中常用指令的使用方式

    其中,指令无疑是使用量最大的,ng内置了很多指令用来控制模板,如ng-repeat,ng-class,也有很多指令来帮你完成业务逻辑,如ng-controller,ng-model。 1. ng-class  ng-class用来给元素绑定类名,其表达式的返回值可以是以下三种:  1) 类名字符串,可以用空格分割多个类名,如’redtext boldtext’;  2) 类名数组,数组中的每一项都会层叠起来生效 下面来看一个使用map的例子: ng-class测试 红色 加粗 删除线 map:{redtext:{{red}}, boldtext:{{bold}}, striketext:{{strike}}}   如果你想拼接一个类名出来,可以使用插值表达式,如:  字体样式测试  然后在controller中指定style的值:  $scope.style = ‘red’;  注意我用了class而不是ng-classng-class相近的,ng还提供了ng-class-odd、ng-class-even两个指令,用来配合ng-repeat分别在奇数列和偶数列使用对应的类。

    26620

    angularjs中常用的ng指令介绍【转载】

    其中,指令无疑是使用量最大的,ng内置了很多指令用来控制模板,如ng-repeat,ng-class,也有很多指令来帮你完成业务逻辑,如ng-controller,ng-model。 ng-classng-class用来给元素绑定类名,其表达式的返回值可以是以下三种:1) 类名字符串,可以用空格分割多个类名,如’redtext boldtext’;2) 类名数组,数组中的每一项都会层叠起来生效 下面来看一个使用map的例子:ng-class测试  红色  加粗  删除线 map:{redtext:{{red}}, boldtext:{{bold}}, striketext:{{strike}} }如果你想拼接一个类名出来,可以使用插值表达式,如:字体样式测试然后在controller中指定style的值:注意我用了class而不是ng-class,这是不可以对换的,官方的文档也未做说明,姑且认为这是 与ng-class相近的,ng还提供了ng-class-odd、ng-class-even两个指令,用来配合ng-repeat分别在奇数列和偶数列使用对应的类。

    32930

    AngularJS 动画

    ngAnimate 模型可以添加或移除 class 。 ngAnimate 模型并不能使 HTML 元素产生动画,但是 ngAnimate 会监测事件,类似隐藏显示 HTML 元素 ,如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML AngularJS 添加移除 class 的指令:ng-showng-hideng-classng-viewng-includeng-repeatng-ifng-switchng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值。 其他指令会在进入 DOM 会添加 ng-enter 类,移除 DOM 会添加 ng-leave 属性。当 HTML 元素位置改变时,ng-repeat 指令同样可以添加 ng-move 类 。

    8430

    Angular CLI 常用终端操作命令

    CLI常用命令----ng new project-name - 创建一个新项目,置为默认设置ng build - 构建编译应用ng test - 运行单元测试ng e2e - 运行端到端(end-to-end )测试ng serve - 启动一个小型web服务器,用于托管应用ng deploy - 即开即用,部署到Github Pages或者Firebase 组件| ng g component homecomponentmy-new-component pipe my-new-pipe 服务| ng g service my-new-service 类| ng g class my-new-class 接口| ng g interface my-new-interface my-new-directive 管道| ng g pipe my-new-pipe 服务| ng g service my-new-service 类| ng g class my-new-class 接口| ng g interface my-new-interface 枚举| ng g enum my-new-enum 模块|ng g module my-module还有不全的望大家留言,大家互相学习

    41040

    Angular 的ng-dirty设置时机

    没有输入任何数据时,class为:ng-untouched ng-pristine ng-valid输入数据后,class变为:ng-valid ng-dirty ng-touched这些class是什么时候设置的呢

    15520

    Angularjs基础(八)

    ngAnimate 模型并不能使用HTML 元素产生动画,但是ngAnimate 会检测事件,类似隐藏显示HTML元素     如果事件发生ngAnimate 就会使用预定义的class来设置HTML元素的动画 AngularJS 添加移除class指令         ng-shwo         ng-hide        ng-class         ng-view         ng-include         ng-repeat         ng-if         ng-switch     ng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值。      其他指令会在进入 DOM 会添加 ng-enter 类,移除 DOM 会添加 ng-leave 属性。      例如: ng-hide 指令会添加一下类:     ng-animate         ng-hide-animate         ng-hide-add (如果元素将被隐藏)         ng-hide-remove

    35560

    第215天:Angular---指令

    AngularJS 属性以 ng- 开头,但是您可以使用 data-ng- 来让网页对 HTML5 有效。二者效果相同。 1、ng-app 指令ng-app指令用来标明一个AngularJS应用程序标记在一个AngularJS的作用范围的根对象上系统执行时会自动的执行根对象范围内的其他指令可以在同一个页面创建多个ng-app +) {30 $scope.ledamei = {31 id: i,32 name: 乐乐 + i,33 age: 20 + i34 };35 }36 37 38 }]);39 40 41 42 4、ng-class 指令ng-class指令可以设置一个键值对,用于决定是否添加一个特定的类名,键为class名,值为bool类型表示是否添加该类名1 2 3 4 5 {{item.content}}6 7 8 9 1 指令会根据属性值去确定是否展示当前元素,例如ng-show=false则不会展示该元素1 2 3 4 5 {{item.content}}6 7 8 9 6、ng-if是指是否存在DOM元素7、ng-linkng-src

    17030

    Angular CLI 使用教程指南参考

    ng命令的shell中 ng doc 命令描述 ng doc 在浏览器中打开Angular文档并搜索当前关键字 ng e2e 命令描述 ng e2e 使用protractor在当前应用中运行e2e测试 ng format 命令描述 ng format 使用clang-format格式化当前项目代码 ng generate 命令描述 ng generate 在项目中构建新代码 ng g 简写 支持的类型用法 Service ng g service my-new-service Class ng g class my-new-class Interface ng g interface my-new-interface 这也使ng set可以在项目之外工作。 ng build构建工件将存储在dist目录中。 --gh-username= 使用的Github用户名,必须. ng lint 命令描述 ng lint 在项目上运行codelyzer linter ng test 命令描述 ng test 使用

    24850

    Angular命令

    node -v 检查node.js安装 npm  -v 检查npm安装 npm install -g @angularcli 安装CLI ng new my-app 创建工作空间并初始化应用 ng serve 运行应用 ng help 命令帮助 ng generate –help 命令帮助 ng add 添加包到项目中 ng build 编译发布 ng build –base-href angularmy-test-app 指定子目录 ng config 添加配置信息 ng generate component videovideo 创建组件 ng generate module demo 创建模块 ng generate enum videoGENRE 创建枚举类型 ng generate class videovideo 创建类 ng generate service serviceLogger  创建服务 ng generate directive my-directive 新建指令 ng generate pipe my-pipe 新建管道备注 –base-href 注意目录结束要带

    13720

    Angular Library 快速入门

    新建 Workspace$ ng new sf-lib-app$ cd sf-lib-app$ ng serve在介绍如何创建 Angular Library 之前,让我们来看一下 Angular 新的配置文件 创建 sf-lib 库$ ng generate library sf-lib --prefix=sf这里我们快速总结一下 ng generate library 命令执行的操作:在 angular.json 创建 sf-lib 组件相信 ng generate 命令对于使用过 Angular CLI 的同学来说,都不会陌生。 这里使用过 Angular Router 模块的同学,可能已经想到了解决方案:@NgModule({ imports: , declarations: , exports: })export class `, styles: , imports: , providers: })export class AppModule {}以上代码成功运行后,你将会在控制台看到以下输出信息:{userId: 1, id

    49110

    angularJS学习之路(六)---指令

    AngularJS 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。  一开始需要知道的几个指令: ng-app 指令初始化一个 AngularJS 应用程序。 ng-init 指令初始化应用程序数据。 ng-model 指令把元素值(比如输入域的值)绑定到应用程序。 ng-repeat 指令会重复一个 HTML 元素: 使用 ng-repeat 来循环数组 {{ x }} 循环对象: {{ x.name + , + x.country }} 更多的 angularJS 指令: 一、重载HTML元素指令 ng-href   动态创建url的时候必用 ng-src ng-disabled ng-checked ng-readonly ng-selected ng-class ng-style ng-disabled: 下面代码中:input 如果没有输入,按钮是不能被点击的 textarea 被禁用1秒 Demo 1: A Button {{someProperty}}

    14620

    Angular 2 + 折腾记 :(1)初识Angular-cli及脱坑要点

    初始化新项目 Component ng g component my-new-component 新建一个组件 Directive ng g directive my-new-directive 新建一个指令 Pipe ng g pipe my-new-pipe 新建一个管道 Service ng g service my-new-service 新建一个服务 Class ng g class my-new-class 新建一个类 Interface ng g interface my-new-interface 新建一个接口 Enum ng g enum my-new-enum 新建一个枚举 Module ng g module my-module 新建一个模块 ----测试及检测 范围 命令 作用 e2e ng e2e 跑自动化测试-自己写测试测试用例 test ng test 跑单元测试 -- 自己写 lint ng lint 调用tslint跑整个项目,可以收获一堆警告和错误,--force --fix --format可以帮助格式和修复部分问题 ----启动ng serve: 启动脚手架服务,默认端口4200

    31210

    Angular.js学习笔记 (二)

    id=10 hash: #name JSON就是用字符串描述对象的方式angular.js常用指令: AngularJS 属性以 ng- 开头,但是您可以使用 data-ng- 来让网页对 HTML5 index; (补充:name.startsWith(lastname):以lastname为开头的name的值为true----这是H5新增元素) ng-class:ng-class指令可以设置一个键值对 ,用于决定是否添加一个特定的类名,键为class名,值为bool类型表示是否添加该类名 :ng-class={red:

    11310

    前端MVC学习总结(二)——AngularJS验证、过滤器、指令

    一、验证angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: ?表单与表单元素都需要通过name引用,请注意设置name的值。 3.2.2、ng-class-even与ng-class-oddAngularJS模板使你可以把该作用域内的数据直接绑定到所显示的HTML元素ng-class-even与ng-class类似,ng-repeat 中偶数时应用ng-class-odd与ng-class类似,ng-repeat中奇数时应用    {{a.name}} 示例代码: 指令 .bg1{ background: lightcoral; color dupes错误说明:AngularJS does not allow duplicates in a ng-repeat directive. ng-repeat还是需要一个唯一的key3.2.5、ng-switch根据作用域表达式动态切换把那个DOM元素包含在已经编译的模板中。?

    38460

    angular使用NG ZORRO来构建博客展示项目(项目结构及路由)

    如何使用angular脚手架搭建项目参看这篇文章 ng new blog-angular安装NG ZORRO 我们界面UI选用NG ZORRO。 import { AppComponent } from .app.component; @NgModule({ declarations: , imports: , providers: })export class 使用如下指令添加4个子模块 ng g module coreng g module layoutng g module shareng g module routes? LayoutModule} from ..layoutlayout.module @NgModule({ imports: , declarations: , imports: , providers: })export class const routes: Routes = ; @NgModule({ imports: , 路由中使用了的component要在这里declaration declarations: })export class

    56330

    Angular 6的新特性介绍

    ng updateng update 是新增的一个cli命令。通过ng update不仅可以保持正确的版本依赖,而且能保持依赖关系的同步。第三方可以使用原理图提供更新脚本。 如果您的某个依赖项提供了一个ng update原理图,那么他们可以在需要进行重大更改时自动更新代码!ng addng add 也是新增的一个cli命令。 6.0之前的版本服务注入 app.module.ts@NgModule({ ... providers: })export class AppModule {} my-service.tsimport { Injectable } from @angularcore; @Injectable()export class MyService { constructor() { }}6.0之后的版本服务注入 中不再需要引入my-service.ts import { Injectable } from @angularcore; @Injectable({ providedIn: root,})export class

    20521

    ng-template和TemplateRef.createEmbeddedView

    源代码:ng-template 标题:判断条件为真 判断条件为假 运行时,准备渲染id为elseTemplate的模板:??TemplateRef有个方法:createEmbeddedView? TemplateRef对应ng-template的引用。看一个实际的例子:template 文件里,定义一个id为tpl的ng-template: Hello, ng-template! Component, TemplateRef, ViewChild, ViewContainerRef} from @angularcore; @Component({ selector: app-ng-template , templateUrl: .ng-template.component.html})export class NgTemplateComponent implements AfterViewInit 使用@ViewChild, 拿到id为tpl的ng-template引用,类型为TemplateRef.调用ViewContainerReference, 创建tpl模板实例。

    13020

    NodeJS前端开发日记(2)AngularJS+Jade入门实战

    jade基本语法总结:一句话,缩进代表标签包含,属性在括号里面,.代表class,#代表id。block是特殊关键字,便于划分继承。 stylesheetscustom-bootstrapcustom-bootstrap.css) link(rel=stylesheet, href=stylesheetsstyle.css) 注意:HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读性:class AngularJS 指令ng-app 指令初始化一个 AngularJS 应用程序。 ng-init 指令初始化应用程序数据。 ng-model 指令把元素值(比如输入域的值)绑定到应用程序。 例如:extends layout block content div(ng-app=,ng-init=firstName=Dick) p 姓名: input(type=text,ng-model=firstName 利用ng-repeat可以循环遍历数组并重复标签:extends layout block content div(ng-app=,ng-init=firstName=) ul li(ng-repeat

    9810

    相关产品

    • 云服务器

      云服务器

      腾讯云服务器(CVM)为您提供安全可靠的弹性云计算服务。只需几分钟,您就可以在云端获取和启用云服务器,并实时扩展或缩减云计算资源。云服务器 支持按实际使用的资源计费,可以为您节约计算成本。

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      扫码关注云+社区

      领取腾讯云代金券