ng-class和ng-show的使用

最近接受了一个项目，用的是angular1+版本，从来没接触过也只能硬着头皮上了，遇到的东西记录一下，回头遗忘了可以看看。
一.
ng-class的用法：目前项目中我用到较简单的一种：
1.上代码：

<ul class="nav nav-pills nav-justified whichType"><li ng-click="clickState(1)" ***ng-class="{'TypeActive':formType==1}"***>应收</li><li ng-click="clickState(2)" ***ng-class="{'TypeActive':formType==2}"***>应付</li>
</ul>

多个类名控制样式时，样式可能是根据不同的值显示不同的样式，比如项目的图标显示项目的当前状态

<div ng-class="{'style1':projectType==1,'style2':projectType==2,'style3':projectType==3,}"></div>

ng-class="{true : 'setting-active',false : 'setting-quiet'}[setTypeBtn]"

setting-active,setting-quiet 是css样式，setTypeBtn是判断条件 true或者false;

3.当列表是ng-repeat出来的话，当点击某一个列的时候希望给他加上某个样式，

<ui ng-repeat="i in [1,2,3]"><li ng-class="{'tabnav-active':$index==selected}"></li>
</ul>

这一条是摘录的资料，自己不是很明白啊，‘selected’是什么？后面深入了再来看。

4.通过key/value键值对绑定：

<div ng-class="{'A':isA,'B':isB,'C':isC}"></div>

当isA为true时，增加A样式；当isB为true时，增加B样式；当isC为true时，增加C样式。
下面这一段是干啥的也不懂啊，先记录一下吧。

<ion-list><ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project}">{{project.title}}</ion-item></ion-list>

参考：https://blog.csdn.net/xwnxwn/article/details/82051785 感谢分享。

ng-class和ng-show的使用相关推荐

ng serve 和 ng build 的区别
在这个文档里有介绍. 在开发过程中,你通常会使用 ng serve 命令来借助 webpack-dev-server 在本地内存中构建.监控和提供服务.但是,当你打算部署它时,就必须使用 ng bui ...
Docker部署NG并设置 NG为静态文件管理器
Docker部署NG并设置 NG为静态文件管理器 1.docker拉取nginx镜像 docker pull nginx 或者docker pull nginx:指定版本号 2.检查拉去下来的镜像 d ...
angular项目集成ng zorro 和ng alain
angular项目集成 ng zorro和ng alain(mock 和acl权限)学习笔记这段时间,比较忙,很久没有写博客了.作为后端开发人员,第一次接触angular,以下是个人的学习心得和D ...
输入 ng build 或者 ng serve 之后没有任何输出的问题分析
Angular 应用,输入 ng build 命令,没有任何反应: ng version 命令的输出:显示的 CLI 版本号为 12.2.5 然而 package.json 里定义的版本为 ~9.1. ...
php ng 性能,PHP NG (PHP 5.7) 性能比PHP5.6 提升近1倍
PHP NG (你要愿意的话叫 PHP 5.7 也行)目前还在 alpha 开发阶段,但已经显示出惊人的性能提升.关键是仍保持对 PHP 5.6 的兼容性. Dmitry Stogov 在今年1月中旬 ...
php ng 性能,PHP NG (PHP 5.7) 性能比PHP5.6 提升近1倍_PHP
PHP NG (你要愿意的话叫 PHP 5.7 也行)目前还在 alpha 开发阶段,但已经显示出惊人的性能提升.关键是仍保持对 PHP 5.6 的兼容性. Dmitry Stogov 在今年1月中旬 ...
php ng 性能,PHP NG (PHP 5.7) 性能比PHP5.6 提升近1倍_PHP教程
PHP NG (PHP 5.7) 性能比PHP5.6 提升近1倍 PHP NG 你要愿意的话叫 PHP 5.7 也行)目前还在 alpha 开发阶段,但已经显示出惊人的性能提升.关键是仍保持对 PHP ...
ng命令汇总：Angular CLI 使用教程指南参考
Angular CLI 使用教程指南参考 Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本. 安装要安装Ang ...
angular蚂蚁_Angular 中后台前端解决方案 - Ng Alain 介绍
背景之前项目使用过vue.js+iview,习惯了后端开发的我,总觉得使用不习惯,之前分析易企秀前端代码,接触到了angular js,完备的相关功能,类似后端开发的体验,让人耳目一新,全新的ang ...
NG Updata（升级）
环境要求 node版本安装需要升级的angular-cli版本: 示例 npm install -g @angular/cli@latest 输入命令 ng update 根据所显示的command ...

ng-class和ng-show的使用

ng-class和ng-show的使用相关推荐

最新文章

热门文章