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：