首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

根据ionic 2中使用*ngIf条件的状态启用和禁用按钮

在Ionic 2中,可以使用ngIf指令根据条件来启用或禁用按钮。ngIf指令是Angular的内置指令之一,用于根据条件来添加或移除DOM元素。

*ngIf指令的语法如下:

代码语言:txt
复制
<button ion-button [disabled]="!condition">按钮</button>

其中,condition是一个布尔类型的变量,根据它的值来决定按钮是否被禁用。当condition为true时,按钮将启用;当condition为false时,按钮将禁用。

在Ionic 2中,可以通过在组件中定义一个布尔类型的变量,并在模板中使用*ngIf指令来控制按钮的启用和禁用状态。例如,假设我们在组件中定义了一个名为isButtonEnabled的变量,并将其初始化为true:

代码语言:txt
复制
export class MyComponent {
  isButtonEnabled: boolean = true;
}

然后,在模板中使用*ngIf指令来根据isButtonEnabled的值来启用或禁用按钮:

代码语言:txt
复制
<button ion-button [disabled]="!isButtonEnabled">按钮</button>

这样,当isButtonEnabled为true时,按钮将启用;当isButtonEnabled为false时,按钮将禁用。

在Ionic 2中,还可以根据其他条件来动态控制按钮的启用和禁用状态。例如,可以使用逻辑运算符来组合多个条件:

代码语言:txt
复制
<button ion-button [disabled]="!condition1 || condition2">按钮</button>

其中,condition1和condition2是两个布尔类型的变量。当condition1为false或condition2为true时,按钮将被禁用;否则,按钮将被启用。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

ionic3应该善用组件指令

其实ionic3(angualr4)ionic2(angular2)差不多,但ionic1(angular1)就差别非常大了,可以说基本是推倒了重来。...来标识,用cli生成命令就如下所示: ionic g directive 指令名 ionic g component 组件名 要说指令组件区别,简单说是不带视图带视图区别,直观效果是:一个为原有标签动态添加功能...其实就是模版指令,如ngIf,当条件为true时,该元素会被添加到DOM中。其主要依赖TemplateRefViewContainerRef来完成操作。...cli使用如下命令创建基本指令,会生成bg-color.ts文件: ionic g directive bgColor 2)修改指令。...自定义结构指令 实例:山寨一个*ngIf收缩显示指令,仅为了起到抛砖引玉效果。

3.5K40
  • 【Appetite】ionic3实录(六)首页实现

    image.png 观察之,发布者内容文本信息可以用ionic现有的组件实现,而视频播放图片画廊(如果是轮播图可以用slides组件,它是阉割并封装过swiper,好像现在这样效果不能实现)需要使用第三方组件.../assets/imgs/foods/4.jpg"} ] }] } 这类似一个服务接口返回来数据,success属性是为了上一节基本网络服务格式一致而设定属性,type...接着我们执行命令新建一个HomeProvider用来统一管理首页数据处理方法(这里按页面逻辑来划分,当然你也可以按业务类型来划分): ionic g provider home 命令执行完成,打开文件写入一个方法...三、安装视频播放组件 用是videogular2,可参考我另一篇文章:《【技巧】ionic3视频播放》 四、安装swiper组件 npm install swiper --save 四、实现首页 打开...用了结构指令ngIf来选择显示视频还是画廊;按钮组可以换用grid布局;此外,为了性能考虑,应用virtualScroll,但我简单一用时布局有变形,赶时间没分析,换用现在方式。

    1.1K40

    SNS项目笔记--fab与遮罩

    在项目界面搭建过程中,使用fab时候发现ionic自带控件中并没有遮罩这样属性这让我们实际操作起来很不舒服如下图所示: ?...消失 c、在遮罩显示下,点击遮罩,遮罩消失,fabList消失 于是我们总结出,我们需要给fab绑定一个点击事件,然后需要给遮罩也绑定一个点击事件,通过*ngIf来完成显示消失...其源码目录在:项目目录/node_modules/ionic-angular/components/fab 目录下查看fab-container.d.ts文件,经过整理,其源码如下: import {...2.2 遮罩源码遮罩源码根据alert源码样式来获取这里直接贴上源码: 3.3 点击事件绑定与判断 import { FabContainer } from 'ionic-angular'; import { Component, ViewChild }

    92240

    Ionic3 自定义指令

    在 Angular 中有三种类型指令 组件 — 拥有模板指令 结构型指令 — 通过添加移除 DOM 元素改变 DOM 布局指令 属性型指令 — 改变元素、组件或其它指令外观行为指令。...组件概念比较大,本文讲解是属性指令结构指令创建和使用,Angular官方文档 创建属性指令 创建一个指令可以直接使用ionic cli 工具 ionic g directive sxylight...替代dom API 获取元素 使用属性指令 使用自定义指令,有几个地方需要注意:首先需要子在 directives.module.ts 文件中 导入导出, 然后需要在你使用模块中导入。...如果时使用 Ionic CLI工具创建指令,directives.module.ts 已经自动配置好了,可以不用理会,需要就是在别的模块中 引入 DirectivesModule(directives.module.ts...功能相反指令,即:当条件不成立时候才会生成对应 DOM 使用结构指令 因为在上面我们引进导入了 DirectivesModule ,而 DirectivesModule 又包含了现在新创建这个结构指令

    1.3K30

    Angular 从入坑到挖坑 - 表单控件概览

    使用 ngModel 进行模板绑定时,angular 在 form 标签上自动附加了一个 NgForm 指令,因为 NgForm 指令会控制表单中带有 ngModel 指令 name 属性元素,而...name 属性则是 angular 用来注册控件 key,所以在表单中使用 ngModel 进行双向数据绑定时,必须要添加 name 属性 4.2.2、跟踪表单控件状态 在表单中使用 ngModel...在数据验证失败情况下,对于系统来说,表单是不允许提交,因此可以将提交事件绑定到表单 ngSubmit 事件属性上,通过模板引用变量形式,在提交按钮处进行数据有效性判断,当无效时,禁用表单提交按钮...,一个 FormControl 类实例对应于一个表单控件,在使用时,通过将控件实例赋值给属性,后续则可以通过监听这个自定义属性来跟踪表单控件状态 import { Component, OnInit...使用 FormBuilder 构建控件,每个控件名对应值都是一个数组,第一个值为控件默认值,第二项第三项则是针对这个值设定同步、异步验证方法 import { Component, OnInit

    18.9K20

    测试用例(功能用例)——完整demo(一千多条测试用例)

    资产查询: 系统支持使用“资产编码/名称”进行模糊查询; “资产状态”筛选条件包括“正常”、“已报废”; “资产类别”筛选条件包含所有已启用、已禁用类别; “取得方式”筛选条件包含所有已启用、已禁用方式...”筛选条件包含所有已启用、已禁用类别; 在资产借用列表页,输入借用单号、使用人姓名或工号、资产编码或名称,选择归还状态、资产类别,点击【查询】按钮,系统显示符合条件资产借用记录。...资产转移查询: 系统支持单个条件查询及组合条件查询;支持使用“转移单号”进行精确查询,使用“资产编码/名称”进行模糊查询; “资产类别”筛选条件包含所有已启用、已禁用类别; 在资产转移列表页,输入转移单号...; 资产维修查询: 系统支持单个条件查询及组合条件查询;支持使用“维修单号”进行精确查询,使用“资产编码/名称”进行模糊查询; “资产类别”筛选条件包含所有已启用、已禁用类别; 在资产维修列表页,输入维修单号...)筛选条件; 设置筛选条件后,点击【确定】,资产列表显示符合条件资产信息; 点击【重置】,系统将重置所设置筛选条件,变为默认状态(各选项均默认未选中); 注意:资产搜索资产筛选可以结合使用,在搜索结果基础上

    6.1K31

    【Appetite】ionic3实录(七)次页实现及分析解决问题【下】

    我们观察initSwiper方法,第一个参数'.wheel .swiper-container'其实是个选择器,所以它也是依托dom操作,此外,由于我们使用了数据绑定,this.vm.dessertSlides...angular脏检测机制是基于一定条件时间,在给this.vm.dessertSlides赋值,dom还没更新完成就调用initSwiper方法不一定会获得想要结果,所以在此之前调用手动检测方法...也就是说,前者只会初始化一次,而后两者每次显示都需要重新初始化,进一步说,若使用后两者方式,对于这里用到swiper,它不是一个angular封装起来组件,不会自动初始化,我们每次显示它时都需要显式调用一下...这并不是说都不要用*ngIf,因为当页面元素太多时会容易导致界面卡顿,所以没用多余元素应该移除,此时就用它。一句话说就是根据情况合理选择显示控制方法。...是的,在大多场景中可以直接用ion-slides,只是会有个别坑要解决,比如我们改动下tshtml文件。

    1.4K20

    构建具有用户身份认证 Ionic 应用

    使用 Okta OpenID Connect (OIDC),可以很轻松Ionic 应用中添加身份认证,完全不需要自己实现。...我喜欢使用 Ionic,我发现使用 Ionic 移植现有的应用程序更多就是修改 HTML 调整 CSS。 Ionic 2 在 一月份发布, 可以使用 Angular 开发 Ionic 应用。...开始使用 Ionic 为了设置 Ionic 开发环境,需要完成以下几步: 安装 Node.js 使用 npm 安装 Ionic Cordova: npm install -g cordova ionic...它允许使用邮箱及密码验证身份,也可以使用社交提供商比如 Facebook、Google Twitter 登录。你可以使用 @ionic/cloud-angular 依赖中提供类创建身份认证。...检查 CORS 重定向 origin 类型。 ? 现在登录可以正常工作了,但是 UI 界面并没有提示。在首页右上角添加一个 "Logout" 按钮

    23.8K00

    详细介绍 AngularJS 表单各种特性、用法最佳实践

    表单交互AngularJS 表单还提供了一些交互性功能,例如动态显示/隐藏字段、禁用/启用按钮等。...条件显示/隐藏字段可以使用 AngularJS 指令 ng-show ng-hide 来根据特定条件动态显示或隐藏表单字段。...禁用/启用按钮可以使用 AngularJS 指令 ng-disabled 来根据特定条件禁用启用按钮。...showField">提交在上述示例中,我们定义了一个复选框来控制一个文本输入框显示隐藏,同时根据该复选框状态禁用启用提交按钮。4....总结AngularJS 表单提供了丰富特性功能,包括表单控件类型、属性验证指令,以及条件显示/隐藏字段、禁用/启用按钮等交互性操作。

    21030

    构建具有用户身份认证 Ionic 应用

    使用 Okta OpenID Connect (OIDC),可以很轻松Ionic 应用中添加身份认证,完全不需要自己实现。...我喜欢使用 Ionic,我发现使用 Ionic 移植现有的应用程序更多就是修改 HTML 调整 CSS。 Ionic 2 在 一月份发布, 可以使用 Angular 开发 Ionic 应用。...开始使用 Ionic 为了设置 Ionic 开发环境,需要完成以下几步: 安装 Node.js 使用 npm 安装 Ionic Cordova: npm install -g cordova ionic...它允许使用邮箱及密码验证身份,也可以使用社交提供商比如 Facebook、Google Twitter 登录。你可以使用 @ionic/cloud-angular 依赖中提供类创建身份认证。...检查 CORS 重定向 origin 类型。 ? 现在登录可以正常工作了,但是 UI 界面并没有提示。在首页右上角添加一个 "Logout" 按钮

    23.2K50

    AngularDart4.0 指南- 模板语法二 顶

    NgStyle 您可以根据组件状态动态设置内联样式。 使用NgStyle,您可以同时设置多个内联样式。 样式绑定是设置单个样式值简单方法。...当指令没有合适宿主元素时如何对元素进行分组。 如何编写自己结构指令。 为什么你只能应用一个结构指令到一个元素。 本节介绍常见结构指令: NgIf:有条件地从DOM中添加或删除元素。...在此示例中,将指令绑定到条件表达式,如isActive。 不要忘记ngIf前面的星号(*)。...它可以根据切换条件从几个可能元素中显示一个元素。 Angular只把选中元素放入DOM中。...但是NgForm指令有,它解释了如果heroForm.form.valid无效并且将整个表单控件树传递给父组件onSubmit方法,您可以禁用提交按钮

    30K20

    Java-Web机试练习题一、后台管理系统——管理员管理模块

    点击“查询”按钮,可实现真实姓名用户状态条件查询,如图 2、3、4 所示。...(1)真实姓名:可实现模糊查询 (2)用户状态:显示为下拉列表,其数据为“全部”、“启用”以及“禁用” 图 2 真实姓名模糊查询 图 3 用户状态查询 图 4 真实姓名用户状态联合查询...点击“禁用”或“启用按钮,可实现用户状态改变,其中,不能修改超级管理员状态。...(1) 若用户为启用状态,则对应状态显示为“启用”并显示“禁用按钮 (2) 若用户为禁用状态,则对应状态显示为“启用按钮。...修改“张紫杨”用户状态,其初始化状态如图 4 所示,点击“禁用按钮,将其设置为“禁用状态,效果 如图 5 所示。 图 5 修改用户状态 4.

    70710

    ionic之AngularJS扩展2 移动开发

    使用内联模板,就可以把这些零散HTML片段模板都集中在一个 文件里,维护开发感觉都会好很多。...AngularJS在编译时会将内联模板id属性值其内容,分别作为key value,存入$templateCache管理hash表中: ? 使用内联模板 内联模板使用,常见有几种情况。...ionic.bundle.js已经打包了ui-route模块, 所以我们使用时不需要单独引入。 通常基于URL匹配路由机制不同,ui-route是基于状态导航: ?...在ui-router中定义指令ui-sref用来触发状态迁移: Go State 1 当用户点击这个链接时,$state服务将根据状态名state1 ...--模板内容将被插入此处--> ui-view一样,ion-nav-view总是根据状态变化,来提取对应模板 并将其在DOM树中渲染。

    3.5K20

    【国产】TASKCTL数据仓库ETL统一调度管控运维平台

    对于作业来说,可以进行执行、运行依赖、中断、中断循环,禁用禁用一次、启用,强制跳过,锁定,置顶优先级等操作。 ​激活调度 激活调度特指启动具备自动化运行特征作业容器:主控流及定时器。...作业管控 批量操作是对作业进行批量“执行”,“运行依赖”,“中断”,“中断循环”,“强制通过”,“启用”,“永久禁用”,“禁用一次”,“锁定”,“解除锁定”,“禁用日期计划”,“启用日期计划”或“置顶优先级...点击“筛选条件按钮,弹出筛选面板。快速筛选提供了常用作业运行状态特性快捷方式。还可以通过工程、容器类型容器范围,作业类型,作业运行平台节点,以及作业运行状态条件进行自定义筛选。 ​...永久禁用:永久跳过作业。跳过执行作业呈“无效通过”状态。 8. 禁止一次:跳过下一次执行后恢复启用状态。跳过执行作业呈“无效通过”状态。 9....通过分析这些数据,能帮助用户更好掌握调度平台使用情况,进一步提高平台使用效率提供数据参考依据。 ​产品官网:www.taskctl.com

    1.8K50

    AngularDart 4.0 高级-结构指令 顶

    NgIf指向指令类; ngIf引用指令属性(attribute)名称。 指令类拼写使用UpperCamelCase(NgIf)。 指令属性名称拼写使用lowerCamelCase(ngIf)。...当条件为false时,NgIf从DOM中删除它宿主元素,将它从DOM事件(它所依附)中分离出来,将组件从Angular变化检测中分离出来并销毁它。 组件DOM节点可以被垃圾收集并释放内存。...从积极方面来说,再次显示元素很快。 该组件以前状态被保存并准备显示。 该组件不会重新初始化 - 这种操作可能很昂贵。 所以隐藏展示有时候是正确。...当你编写自己结构指令时,可以使用这些微观语法机制。 研究NgIfNgFor源代码是了解更多信息好方法。 模板输入变量 模板输入变量是一个变量,其值可以在模板单个实例中引用。...注意使用NgIf脱糖形式。 ? 现在有条件地用排除一个选项。

    16.1K20

    瑞吉外卖-员工管理

    '已禁用' : '正常' }} # 启用禁用员工账号 # 需求分析 在员工管理列表页面,可以对某个员工账号进行启用或者禁用操作...账号禁用员工不能登录系统,启用员工可以正常登录。 需要注意,只有管理员(admin用户)可以对其他普通用户进行启用禁用操作,所以普通用户登录系统后启用禁用按钮不显示。...如果某个员工账号状态为正常,则按钮显示为“禁用”,如果员工账号状态为已禁用,则按钮显示为“启用”。 # 代码开发 页面是怎么做到只有管理员admin能够看到启用禁用按钮?...,跳转到编辑页面,在编辑页面回显员工信息并进行修改,最后点击保存按钮完成编辑操作 # 代码开发 在开发代码之前需要梳理一下操作过程对应程序执行流程: 点击编辑按钮时,页面跳转到add.html,...页面接收到服务端响应信息后进行相应处理 注意:add.html页面为公共页面,新增员工编辑员工都是在此页面操作 编写处理器 /** * 根据id查询员工信息 * @param

    1K40

    Java项目练习:后台管理系统——管理员管理模块(附源码下载地址)

    点击“查询”按钮,可实现真实姓名用户状态条件查询,如图 2、3、4 所示。...(1)真实姓名:可实现模糊查询 (2)用户状态:显示为下拉列表,其数据为“全部”、“启用”以及“禁用”  3....点击“禁用”或“启用按钮,可实现用户状态改变,其中,不能修改超级管理员状态。...(1) 若用户为启用状态,则对应状态显示为“启用”并显示“禁用按钮 (2) 若用户为禁用状态,则对应状态显示为“启用按钮。...修改“张紫杨”用户状态,其初始化状态如图 4 所示,点击“禁用按钮,将其设置为“禁用状态,效果如图 5 所示。 4. 点击“修改真名”按钮,可实现用户真实姓名修改。

    97410

    Angular 中结构指令模式 - 它们是什么且怎么使用

    *ngIf - 根据表达式返回布尔值,有条件地包含一个模版(即条件渲染模版) *ngFor - 遍历数组 *ngSwitch - 渲染每个匹配是图 下面是一个结构化指令例子。...要使用结构指令,我们需要在 HTML 模版中添加一个带有指令元素。然后根据我们在指令中设置条件或者表达式添加、删除或者替换元素。 结构指令例子 我们添加些简单 HTML 代码。...*ngIf 指令 我们根据条件使用 *ngIf 来确定展示或者移除一个元素。...*ngSwitch 指令 译者加:这个指令实际开发很有用 我们使用 ngSwitch 来根据不同条件声明来决定渲染哪个元素。...希望通过本文,读者能更好理解怎么去使用这些指令什么时候去使用这些模式。 本文为译文,采用意译形式。

    3.8K20

    【Angular教程】-内容投影u002F@ContentChildu002F@ViewChild

    ---- 前言 这一篇我们带来是关于组件基础使用最后一块,内容投影Vue中插槽很类似,在组件封装时候非常有用,我们一起来体验一下。 正文 1....有条件内容投影 中文网描述: 如果你组件需要_有条件地_渲染内容或多次渲染内容,则应配置该组件以接受一个 ng-template 元素,其中包含要有条件渲染内容。...使用 ng-template 元素,你可以让组件根据你想要任何条件显式渲染内容,并可以进行多次渲染。在显式渲染 ng-template 元素之前,Angular 不会初始化该元素内容。...使用ng-container定义我们投影区块 使用ngTemplateOutlet指令来渲染ng-template元素。 通过内置动态指令*ngIf来控制是否渲染投影。...: ContentDirective; } 通过日志可以看到我们在切换容器组件expanded标识时,只有开启状态my-hello组件才会初始化,下面的这个ngIf虽然在页面看不到渲染内容,但组件实实在在被初始化过了

    54830
    领券