Skip to content

小小前端

明月本无心,行人自回首。

Menu
  • 前端开发
  • 编程技术
  • SQL语句
  • Linux
  • 生活/旅行
  • JSEditor
  • MiniBarCMS
  • About
  • 隐私政策
Menu

angular2中如何制作如同input search的清空功能

Posted on 2017年6月22日 by king2088

使用过jQuery的童鞋,想要制作一个清空input内容的图标按钮是非常简单的事情,但是今天我要来说下angular2+版本中制作如此一个功能,远远比jQuery简单得多。而且是超级简单,根本不用写typescript代码,仅在html模板中就可以直接实现,当然我们也可以通过typescript的代码来进行实现,大同小异啊!
先来看实现后的大致功能效果,如下图:

input清空按钮
input清空按钮

要制作这么一个功能,使用angular制作其实并不困难,不过要在css中下功夫,而js逻辑是很简单的事情,并且angular中实现并无需写js逻辑。
关于css部分,请自行进行编写,这里我只实现功能,css部分实现的思想也很简单,利用position定位来对按钮或者图标进行定位到input的右边即可实现。
1、angular直接在模板中实现清空input的方法。

清空input

用户名:X

密   码:X


以上代码中就已经完全实现了这个清空的方法,大家可以在angular中运行试试,并且无需写js代码。很简单的就实现了,这就是angular强大的事件驱动。
2、使用angular的typescript来进行实现
其中我们要使用到ViewChild和ElementRef来进行操作,ViewChild使用很方便,就像Java中的注解一样方便。
1)、首先导入相关功能模块
import { Component, ViewChild, ElementRef } from '@angular/core';
2)、模板文件

清空input

用户名:X

密   码:X


3)、获取相关以#绑定的input
@ViewChild('name') name:ElementRef
@ViewChild('pwd') pwd:ElementRef

4)、编写相关click事件的清空方法
clear_name(){
this.name.nativeElement.value = ''
}
clear_pwd(){
this.pwd.nativeElement.value = ''
}

怎么样?这两个方法中一眼就可以看出来,第一种方法是最简单的,不过第二种方法可以为我们提供更多的使用场景。总体来说,angularJS是非常不错的事件驱动JS库。下面是我实现后的效果,大家可以看一看!

angular-input清空功能
angular-input清空功能

发表评论 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

分类

近期文章

  • cordova-plugin-camera在某些android机型中拍照或选择文件时闪退出错的解决办法 2019年10月24日
  • JavaScript nodeJS base64加密解密url参数 2019年10月15日
  • 利用expressJS编写reset api 2019年4月13日
  • angular4 + http拦截器 2019年3月21日
  • ionic navCtrl.pop如何传递参数给上一个页面 2018年11月16日
  • ionic3搭建开发/测试环境 2018年10月25日
  • ionic2、3双击硬件back按键退出应用 2018年10月24日
  • VMware安装Mac OS High Sierra 10.12及高版本无法全屏 2018年8月24日

近期评论

  • 手表资讯发表在《ReactJS环境搭建》
  • king2088发表在《ionic中使用热更新插件cordova-hot-code-push》
  • 重阳节的诗句发表在《常用的sql语句》
  • 新郎致辞发表在《PHP代码实现WordPress相关文章的几种方法》
  • 霸道总裁发表在《vsftpd 提示 unrecognized service 解决办法》

归档

标签

Ajax Android Angular APP Cordova CSS css3 express html5 ionic Java javascript jQuery Linux loading mac Mac OS mongodb MySQL node nodejs PHP react SQL SSH VirtualBox vue vue-cli win10 WordPress WP REST API 主题 兼容性 前端 备份 插件 数据库 数组 服务器 正则表达式 浏览器 热更新 目录 组件 错误
2023年 4月
一 二 三 四 五 六 日
 12
3456789
10111213141516
17181920212223
24252627282930
« 10月    
© 2023 小小前端 | Powered by Superbs Personal Blog theme