使用AngularJS数据绑定和模型

在设计表单和决定给ng-model绑定哪些字段时,你应该总考虑需要输入什么格式的数据。让我们看下面的演示例子:

<html ng-app="notesApp">
<head><title>Notes App</title></head>
<body ng-controller="MainCtrl as ctrl">
 
  <form ng-submit="ctrl.submit1()">
    <input type="text" ng-model="ctrl.username">
    <input type="password" ng-model="ctrl.password">
    <input type="submit" value="Submit">
  </form>
 
  <form ng-submit="ctrl.submit2()">
    <input type="text" ng-model="ctrl.user.username">
    <input type="password" ng-model="ctrl.user.password">
    <input type="submit" value="Submit">
  </form>
 
<script src="https://cdn.jsdelivr.net/angularjs/1.2.28/angular.min.js"></script>
<script type="text/javascript">
  angular.module('notesApp', [])
    .controller('MainCtrl', [function() {
      var self = this;
      self.submit1 = function() {
        // Create user object to send to the server
        var user = {username: self.username, password: self.password};
        console.log('First form submit with ', user);
      };
      self.submit2 = function() {
        console.log('Second form submit with ', self.user);
      };
    }]);
</script>
</body>
</html>

在这个例子中,有两个相同字段的表单。第一个表单直接将username和password绑定控制器上的,而第二个表单将username和password键绑定到控制器的user对象上。两个表单都触发ng-submit函数提交数据。对于第一个表单,在我们可以将其发送到服务器前,必须从控制器获取这些字段,并将它们放入到一个对象或者类似的数据中。而对于第二个表单,我们可以直接从控制器获取user对象并发送到服务器。

第二种方式更有意义,因为我们直接用控制器对象展示表单,这省去了使用表单值时可能不得不要做的任何额外工作。

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

发表评论