Freewind @ Thoughtworks scala java javascript dart 工具 编程实践 月结 math python english [comments admin] [feed]

(2013-01-01) 06. 表单

广告: 云梯:翻墙vpn (省10元) 土行孙:科研用户翻墙http proxy (有优惠)

表单中有很多控件,如input, select, textarea等,是用来让用户输入数据的。

如果表单支持验证,用户在输入了不合法的数据时,能得到实时提示(比如哪儿错了,如何修正等),会是一种很好的用户体验。需要明白的是,不论“客户端验证”对于提升用户的使用体验如何重要,也不要忘了在服务器端再次验证。因为用户可以绕过客户端验证直接向服务器端发送非法数据。

简单表单

理解双向绑定最关键的directive是ng-model这个directive。它通过model数据同步到view,以及将view变化同步到model的方式,提供了双向绑定。另外,它还通过NgModelController提供了用于改变其它directive的行为的API

源代码

indexhtml

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-controller="Controller">
      <form novalidate class="simple-form">
        Name: <input type="text" ng-model="user.name" /><br />
        E-mail: <input type="email" ng-model="user.email" /><br />
        Gender: <input type="radio" ng-model="user.gender" value="male" />male
        <input type="radio" ng-model="user.gender" value="female" />female<br />
        <button ng-click="reset()">RESET</button>
        <button ng-click="update(user)">SAVE</button>
      </form>
      <pre>form = {{user | json}}```
      <pre>master = {{master | json}}```
    </div>
  </body>
</html>

**script.js**

function Controller($scope) {
  $scope.master= {};

  $scope.update = function(user) {
    $scope.master= angular.copy(user);
  };

  $scope.reset = function() {
    $scope.user = angular.copy($scope.master);
  };

  $scope.reset();
}

demo

注意:`novalidate`用来关闭浏览器自己的form验证

### 使用CSS classes

为了让表单跟控件一样可以被修饰,`ngModel`提供了以下CSS classes:
comments powered by Disqus