AngularJS中使用表单输入的应用设计

在Angular中使用表单元素非常方便。正如我们在前面几个例子中看到的,你可以使用ng-model属性把元素绑定到你的模型属性上。这一机制对于所有标准的表单元素都可以起作用,例如文本框、单选按钮、复选框,等等。我们可以像下面这样把一个复选框绑定到一个属性上:

这样做的含义是:

1.当用户选中了复选框之后,SomeController中$scope的youCheckedIt的属性就会变成true。而反选复选框会让youCheckedIt变为false。

2.如果你在SomeController中把$scope.youCheckedIt设置为true,那么UI中的复选框将会变成选中状态。设置为false将会反选复选框。

举例来说,当用户做了某件事情的时候,我们希望程序能真正地做出某种动作。对于输入元素来说,你可以使用ng-change属性来指定一个控制器方法,一旦用户修改了输入值,这个方法就会被调用。我们来做一个简单的计算,帮助消费者计算一下需要付多少钱:

对于这个非常简单的例子来说,我们只要把输出文本框的值设置为用户估价的10倍即可。同时,在一开始的时候我们会把文本框的默认值设置为0:

但是,以上代码所采取的策略有一个潜在的问题,即,只有当用户在文本框中输入值的时候我们才会去计算所需的金额。当用户在这个特定的输入框中输入时,输入框就会正确地刷新。但是,如果还有其他输入框也绑定到模型中的这个属性上,会怎么样呢?如果接收到服务端的数据,导致数据模型进行刷新,又会怎么样呢?

为了能够正确地刷新输入框,而不管它是通过何种途径进行刷新的,我们需要使用$scope中的$watch()的函数。在本章后续的内容里将会详细讨论这个watch函数。最基本的一点就是,你可以调用$watch()函数来监视一个表达式,当这个表达式发生变化时就会调用一个回调函数。

在当前这个例子中,我们需要监视funding.startingEstimate,当它的值发生变化时就调用computeNeeded()。下面运用这一技术重写StartUpController:

但是,以上代码所采取的策略有一个潜在的问题,即,只有当用户在文本框中输入值的时候我们才会去计算所需的金额。当用户在这个特定的输入框中输入时,输入框就会正确地刷新。但是,如果还有其他输入框也绑定到模型中的这个属性上,会怎么样呢?如果接收到服务端的数据,导致数据模型进行刷新,又会怎么样呢?

为了能够正确地刷新输入框,而不管它是通过何种途径进行刷新的,我们需要使用$scope中的$watch()的函数。在本章后续的内容里将会详细讨论这个watch函数。最基本的一点就是,你可以调用$watch()函数来监视一个表达式,当这个表达式发生变化时就会调用一个回调函数。

在当前这个例子中,我们需要监视funding.startingEstimate,当它的值发生变化时就调用computeNeeded()。下面运用这一技术重写StartUpController:

请注意,需要监视的表达式位于引号中。是的,它是一个字符串。这个字符串会被当作Angular表达式来执行。表达式可以执行一些简单的操作,并且可以访问$scope对象中的属性。

我们还可以监视一个函数的返回值,但是监视funding.startingEstimate属性是没有用的,因为这个值算出来是0,也就是它的初始值,而且这个值永远不会发生变化。然后,无论何时只要funding.startingEstimate发生变化,我们的funding.needed就会自动刷新,我们可以编写一个更加简单的模板,示例如下:

Starting:

Recommendation: {}

在某些情况下,你不想一有变化就立刻做出动作;而是要进行等待,直到用户告诉你他已经准备好了,例如完成订购或者发出一条确认信息之后。如果你正在使用表单把输入项组织起来,你可以在form自身上使用ng-submit指令来指定一个函数,当表单提交的时候可以执行这个函数。我们来扩展前面的例子,实现用户点击一个按钮就可以为他所选的商品计算金额:

同时,在提交表单的时候,ng-submit还会自动阻止浏览器执行默认的POST操作。对于处理其他事件的情况,例如提供非表单提交型的交互,Angular提供了一些事件处理指令,它们类似于浏览器原生的事件属性。对于onclick,可以使用ng-click;对于ondblclick,可以使用ng-dblclick;等等。我们可以试着实现一个这样的功能:再次扩展开始的那个计算器,为它添加一个复位按钮,这个按钮将会把输入值重置为0:

本文来自企鹅号 - 亿仁网媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏cnblogs

Vuex原来可以这样上手

     在Mvc模式大行其道的今天,后端通过各种Mvc框架实现视图与数据模型的隔离,而前端这方面也发展迅速。vue实现了Dom与viewModel双向绑定,使...

2085
来自专栏web开发

移动端图片放大滑动查看-插件photoswipe的使用

最近在开发项目的时候,遇到一个需求,需要移动端实现放大查看图片的功能,然后我就在网上搜索了一下资料,看到了photoswipe这个插件,后来试了试,确实挺好用的...

8785
来自专栏黑泽君的专栏

java基础学习_GUI_如何让Netbeans的东西Eclipse能访问、GUI(图形用户接口)_day25总结

java基础学习_GUI_如何让Netbeans的东西Eclipse能访问、GUI(图形用户接口)_day25总结

972
来自专栏五毛程序员

五毛的cocos2d-x学习笔记06-处理用户交互

1512
来自专栏自动化测试实战

Flask第37篇——模板项目实战(三)

我们先来分析上面这个页面,我们发现除了搜索栏下面的图片区域有些变化以外,其余都是base.html的布局,所以我们首先想到可以继承base.html,而图片显示...

1063
来自专栏用户2442861的专栏

我的VS2010+VAssistX

最近越来越觉得VAssistX好用,可能是以前没有去仔细研究过吧,也可能是因为我是个快捷键控吧,不管怎样,用或不用,方便或不方便,它就是那里,一动也不动,进入...

1711
来自专栏从零开始学 Web 前端

JavaScript基础(一)概述

ECMAScript(前身为欧洲计算机制造商协会):JavaScript的语法规范

1183
来自专栏Debian社区

Web前端知识体系精简

Web前端技术由html、css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从...

2083
来自专栏前端儿

pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新

再通过 onhashchange 事件监听hash锚点的变化,手动进行前进后退操作,浏览器支持度

1551
来自专栏DeveWork

WordPress 中获取文章的第一段文字的函数

之前写过一篇《WordPress 文章截断方式:有more标签的优先more标签,否则截断一定字数》,自认为是一个不错的首页文章截取方式,但如今Jeff 又发现...

2045

扫码关注云+社区

领取腾讯云代金券