Angular之旅tip:获取输入的方式

Angular之所以非常受人瞩目,不得不说其强大的模板处理能力,尽管jQurey库对DOM元素和事件的操作异常简单。不过在分离视图和业务层的领域中,Angular的template扮演了很重要的作用。所以这篇会解释关于获取用户输入的Angular的方法:

输入文本内容,点击鼠标,都会有DOM事件的发生,与jQuery同样,A也有直接处理DOM事件的能力。

方法一:绑定 DOM 事件并且通过$event对象取得用户输入

方法基本与jQuery相同,不过监听器需要用一对圆括号包裹起来,比如 (keyup)=" onKeyboard($event)"等等,当键盘事件被触发,组件会相应地处理keyup事件,同时从$event获取DOM对象。不再累述。

Angular之旅tip:获取输入的方式_第1张图片

方法之二:从模板变量中获得用户输入

A除了常规的对DOM事件进行响应外,还有另一种方式。就是把模板的元素变量化,就好像赋予了ID标签,并且在模板中直接引用,直接取值,这就是模板变量。如下图:

Angular之旅tip:获取输入的方式_第2张图片

中的box就是input标签的模板变量。而插值表达式中的box.value便是直接调用的结果。当然,你需要注意的是“ (keyup)=’0‘ ”是必须的

下节的tip,我将详细得对Angular表单进行提炼说明,“表单是商业应用的支柱,我们用它来执行登录、求助、下单、预订机票、安排会议,以及不计其数的其它数据录入任务。”

你可能感兴趣的:(angular,博客)