Page 88 - AngularJS权威教程

68 第 9 章 内置指令

angular.module('myApp',[])
.controller('FormController',function($scope) {
$scope.fields = [
{placeholder: 'Username', isRequired: true},
{placeholder: 'Password', isRequired: true},
{placeholder: 'Email (optional)', isRequired: false}
];

$scope.submitForm = function() {
alert("it works!");
};
});
下面用这些数据生成一个有验证功能的动态表单：

<form name="signup_form"
ng-controller="FormController"
ng-submit="submitForm()" novalidate>
<div ng-repeat="field in fields"
ng-form="signup_form_input">
<input type="text"
name="dynamic_input"
ng-required="field.isRequired"
ng-model="field.name"
placeholder="{{field.placeholder}}" />
<div
ng-show="signup_form_input.dynamic_input.$dirty &&
signup_form_input.dynamic_input.$invalid">
<span class="error"
ng-show="signup_form_input.dynamic_input.$error.required">
The field is required.
</span>
</div>
</div>
<button type="submit"
ng-disabled="signup_form.$invalid">
Submit All
</button>
</form>
input.ng-invalid {
border: 1px solid red;
}

input.ng-valid {
border: 1px solid green;
}
在线示例：http://jsbin.com/UduNeCA/1/edit。

17. ng-click

ng-click用来指定一个元素被点击时调用的方法或表达式。
<div ng-controller="CounterController">
<button ng-click="count = count + 1"
ng-init="count=0">
Increment
</button>
count: {{ count }}
<button ng-click="decrement()">