使用AngulaerJS表单

当我们在AngularJS中处理表单,大量使用ng-model指令让数据输入输出到表单。除了数据绑定,也推荐用这种方式设计模型和绑定来简化代码。让我们看一个例子:

<html ng-app="notesApp">
<head><title>Notes App</title></head>
<body ng-controller="MainCtrl as ctrl">
  <form ng-submit="ctrl.submit()">
    <input type="text" ng-model="ctrl.user.username">
    <input type="password" ng-model="ctrl.user.password">
    <input type="submit" value="Submit">
  </form>
  <script src="http://riafan.com/libs/angular.js"></script>
  <script type="text/javascript">
    angular.module('notesApp', [])
      .controller('MainCtrl', [function() {
        var self = this;
        self.submit = function() {
          console.log('User clicked submit with ', self.user);
        };
      }]);
  </script>
</body>
</html>

我们仍然使用与上一次相同的两个输入字段,但我们做了一些改变:

  • 我们将文本字段和按钮包裹在表单中。我们没有给按钮添加ng-click指令,而是给表单自身添加了一个ng-submit指令。作为表单按钮,ng-submit指令与ng-click指令相比有几个优势。前者可以用多种方式触发表单提交事件:单击submit按钮,或在文本字段中按回车。所有这都会触发ng-submit事件,而ng-click只有当用户单击按钮时触发。
  • 我们没有绑定ctrl.username和ctrl.password,而是绑定ctrl.user.username和ctrl.user.password。注意我们并没有在控制器中声明user对象(即self.user = {})。当您使用ng-mode时,AngularJS自动创建作用域链中必需的对象和键来实例化数据绑定。在这种情况下,只有用户在用户名或密码字段输入东西,才会创建user对象。在用户名或密码字段输入第一个字母时会创建user对象,并赋值到相应的绑定字段。

不完全译自《AngularJS-Up and Running》。

发表评论