Page 87 - AngularJS权威教程

9.2 在指令中使用子作用域 67

ng-model="equation.x"
ng-change="change()" /> 1
<code>{{ equation.output }}</code>
</div>
2

angular.module('myApp',[])
.controller('EquationController',function($scope) {
$scope.equation = {}; 3
$scope.change = function() {
$scope.equation.output
= parseInt($scope.equation.x) + 2; 4
};
});
在线示例：http://jsbin.com/onUXuxO/1/edit。 5

上面的例子中，只要文本输入字段中的内容发生了变化就会改变equation.x的值，进而运
行change()函数。 6
16. ng-form
7
ng-form用来在一个表单内部嵌套另一个表单。普通的HTML <form>标签不允许嵌套，但
ng-form可以。
8
这意味着内部所有的子表单都合法时，外部的表单才会合法。这对于用ng-repeat动态创建
表单是非常有用的。
9
由于不能通过字符插值来给输入元素动态地生成name属性，所以需要将ng-form指令内每组
重复的输入字段都包含在一个外部表单元素内。
10
下面的CSS类会根据表单的验证状态自动设置：

 表单合法时设置ng-valid； 11
 表单不合法时设置ng-invlid；
 表单未进行修改时设置ng-pristion；
 表单进行过修改时设置ng-dirty。 12

Angular不会将表单提交到服务器，除非它指定了action属性。要指定提交表单时调用哪个
JavaScript方法，使用下面两个指令中的一个。 13
 ng-submit：在表单元素上使用。
 ng-click：在第一个按钮或submit类型（input[type=submit]）的输入字段上使用。 14
为了避免处理程序被多次调用，只使用下面两个指令中的一个。
15
下面的例子展示了如何通过服务器返回的JSON数据动态生成一个表单。我们用ng-loop来遍
历从服务器取回的所有数据。由于不能动态生成name属性，而我们又需要这个属性做验证，所以
在循环的过程中会为每一个字段都生成一个新表单。 16
由于AngularJS中用来取代<form>的ng-form指令可以嵌套，并且外部表单在所有子表单都合
17
法之前一直处于不合法状态，因此我们可以在动态生成子表单的同时使用表单验证功能。是的，
鱼和熊掌可以兼得。
18
下面先看一下我们硬编码的JSON数据，把它假设成是从服务器返回的：