Angular学习（六）——表单输入

对Angular中的表单元素非常简单。就像之前所分析的几个案例，用户可以使用ng-model属性来将数据元素绑定到你的模板特性上。这种方式适合于所有表单元素，比如文本输入、单选按钮、选择框的等等。我们可以将一个选择框绑定到一个属性上，方式如下：

<form ng-controller="SomeController">

<input type="checkBox" ng-model="youCheckedIt">

</form>

这意味着：

1、当用户选择这个单选框时，在SomeController的$scope中名为youCheckIt的属性将会变为TRUE。将这个选框设置为未选中状态将使得名为youCheckIt属性值为FALSE。

2、如果你在SomeController中设置$scope.youCheckIt为TRUE，UI中选框变为选中状态，而设置为FALSE时选框变为未选中状态。

对于输入元素，利用ng-change属性来制定一个控制器方法，这样每当用户改变输入值时该方法将被访问。下面就做一个简单的计算器来帮助用户计算需要花费多少钱：

<form ng-controller="StartUpController">

 Starting:<input ng-change="computeNeeded()" ng-model="funding.startingEstimate">

 Recommendation:{{funding.needed}}

</form>

为了简化用例，我们只涉及输出为10次用户的估计值。同时将设置默认值为0来启动：

function StartUpController（$scope）{

$scope.funding = { startingEstimate: 0};

$scope.computeNeeded = function(){

$scope.needed = $scope.startingEstimate *10;

};

}

然而在上面的编码策略中存在一个潜在的问题。问题是我们仅仅在用户在输入框中输入时重新计算了所需要的总计算值。当用户在这个特殊的输入框中进行更新时，上面的代码是没有任何问题的。但是如果其他的输入框也绑定到模板的这个属性呢？如果模板的这个属性在从服务器获取数据时才进行更新呢？

如果不管这个区域如何更新都对这个相对应的属性进行更细，可以使用$scope的一个名为$watch()的函数。我们将在下一节对watch进行详细讨论。其中你可以用一个表达式来调用$watch()函数以此来进行观察，并得到在表达式改变时触发函数并返回的值。

在本案例中，我们希望来观察funding.startingEstimate并在funding.startingEstimate改变时调用computeNeeded()函数。此时我们可以对上述StartUpController进行重写：

function StartUpController（$scope）{

$scope.funding = { startingEstimate: 0};

$scope.computeNeeded = function(){

$scope.needed = $scope.startingEstimate *10;

};

$scope.$watch("funding.startingEstimate", computeNeeded);

}

注意：表达式是用引号扩起来的，它是一个字符串。这个字符串就等同于Angular表达式。表达式可以做一些简单的操作，并且能够对$scope对象的属性进行更改。我们将会在后续对表达式进行描述。

同样也可以对函数的返回值进行观察，但是当属性funding.staringEstimate计算等于0时将无效。这样funding.needed将会随着funding.startingEstimate的改变自动进行更新，我们可以创建一个简单的模板，例如：

<form ng-controller="StartUpController">

 Starting:<input  ng-model="funding.startingEstimate">

 Recommendation:{{funding.needed}}

</form>

当然也有一些不必对每个改变都进行操作的场景，例如你想等到用户告知已经准备OK时才进行操作。如果你有一个输入表单，可以在表单上使用ng-submit指令来自行创建一个函数来对表单提交的情形进行处理。我们对之前的案例进行扩展——通过按钮点击来让用户触发相应的操作。

<form ng-submit = "requestFunding()" ng-controller="StartUpController">

 Starting:<input ng-change="computeNeeded()" ng-model="funding.startingEstimate">

 Recommendation:{{funding.needed}}

<button>Fund my startup!</button>

</form>

function StartUpController（$scope）{

$scope.funding = { startingEstimate: 0};

$scope.computeNeeded = function(){

$scope.needed = $scope.startingEstimate *10;

};

$scope.requestFunding = function(){

window.alert("Sorry, please get more customers first.");

};

}

当浏览器视图完成提交表单时，ng-submit指令将会自动浏览器完成它默认的POST操作。我们也可以扩展我们启动的计算器代码，并在最后的时候设置一个重置按钮来将输入框值重置为0.

<form ng-submit = "requestFunding()" ng-controller="StartUpController">

 Starting:<input ng-change="computeNeeded()" ng-model="funding.startingEstimate">

 Recommendation:{{funding.needed}}

<button ng-click="reset()">Reset</button>

</form>

function StartUpController（$scope）{

$scope.funding = { startingEstimate: 0};

$scope.computeNeeded = function(){

$scope.needed = $scope.startingEstimate *10;

};

$scope.requestFunding = function(){

window.alert("Sorry, please get more customers first.");

};

$scope.reset = function(){

$scope.startingEstimate = 0;

}

}