AngularJS中关于ng-class和*ngIf指令

在工作中写ionic项目时，因为用的ionic3，与之相搭配的是Angular4，之前不会，就大致看看，写项目的时候遇到再查找。

在写到etf指数基金的时候，有的可以立即抢购，有的是封闭期。想实现这种效果，如下图：

我就用到了ng-class,两个按钮需要不同的样式，

<ion-col col-5 text-right><button ion-button (click)="onEvent('onPurchase', data)"[ngClass]="{true:'hactive',false:'hdisable'}[data.isActive]" round>{{data.etfbtn}}</button></ion-col>

我想在父页面传值的时候，传过来一个isActive参数，值为true或者false，
但是后台给的接口才不会给你这个数据，所以得直接预判,用*ngIf：

<div ng-controller="firstController"><div ng-class="{'change1':select,'change2':choice,'change3':lala}">{{data.item}}</div>
</div><script>var app=angular.module("myModule",[]);app.controller('firstController',function($scope){$scope.select=true;$scope.lala=true;})</script>

哈哈，每天进步一点点,^_^

链接是http://www.jb51.net/article/92775.htm

<ion-col col-5 text-right><button ion-button (click)="onEvent('onPurchase', data)" class="hactive" *ngIf="data.etfbtn=='立即抢购'" round>{{data.etfbtn}}</button><button ion-button (click)="onEvent('onPurchase', data)" class="hdisable" *ngIf="data.etfbtn=='封闭期'"  round>{{data.etfbtn}}</button>
</ion-col>

以上两段代码都是相同的效果，但是ng-class通过对象数组只有true和false两种状态，有些局限，*ngIf可以写好多种，
但是相同代码要重复写，不好看，代码冗余；我在网上也查到了其他做法，可以试试；

第三种：通过key/value

AngularJS中关于ng-class和*ngIf指令相关推荐

Angularjs进阶笔记（2）—自定义指令中的数据绑定
[摘要]有关自定义指令的scope参数,网上很多文章都在讲这3种绑定方式实现的效果是什么,但几乎没有人讲到底怎么使用,本篇希望聊聊到底怎么用这个话题. 一. 自定义指令自定义指令,是Angularj ...
AngularJS中Directive指令系列 - 基本用法
参考: https://docs.angularjs.org/api/ng/service/$compile http://www.zouyesheng.com/angular.html Direct ...
AngularJs中的directives（指令part1）
一.指令的职责指令的职责是修改DOM结构,并将作用域和DOM连接起来.即指令既要操作DOM,将作用域内的数据绑定到DOM节点上,又要为DOM绑定事件调用作用域内的对应的方法. 二.创建自定义指令 ...
AngularJS中的指令全面解析(必看)
出处: http://www.jb51.net/article/84665.htm 说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的 ...
AngularJS中自定义指令
AngularJS中除了内置指令,还可以自定义指令.自定义指令和自定义过滤器一样,有两种方法: 第一种,在module中配置:$compileProvider.directive('directive ...
转: 理解AngularJS中的依赖注入
理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...
如果我有jQuery背景，那么“ AngularJS中的思考”吗？ [关闭]
已关闭 . 这个问题需要更加集中 . 它当前不接受答案. 想改善这个问题吗? 更新问题,使其仅通过编辑此帖子来关注一个问题. 4年前关闭. 已锁定 . 该问题及其答案被锁定,因为该问题是题外话,但具有 ...
AngularJS中的表单验证机制
客户端表单验证是AngularJS里面最酷的功能之一. AngularJS表单验证可以让你从一开始就写出一个具有交互性和可响应的现代化HTML5表单. angularJs实现了大多数的HTML5表单域 ...
angularJS中directive与controller之间的通信
当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...
Angularjs 中select回显后重复选项的解决
Angularjs 中select回显后重复选项的解决 (1)Angularjs 中select回显代码,records和categoryValueList都是后台返回的 <!DOCTYPE h ...

AngularJS中关于ng-class和*ngIf指令

AngularJS中关于ng-class和*ngIf指令相关推荐

最新文章

热门文章