Question

这一定是非常愚蠢的事情。我无法得到一个简单的工作形式。通过谷歌吐出的一堆链接，但没有帮助。我alwajs得到$ scope.user未定义如下。

这是表格......

<form name="login" ng-submit="submitLogin()" ng-controller="LoginController">
  <ul>
    <li>
      <input type="text" name="name" ng-model="user.name" placeholder="Username:">
    </li>
    <li>
      <input type='password' name="pass" ng-model="user.pass" placeholder="Password:">
    </li>
  </ul>
  <button type="submit">Submit</button>
</form>

这是控制器...

basal.controller('LoginController', function($scope, $http) {
  $scope.submitLogin = function() {
    $http.post('/users', $scope.user)
    .success(function(data) {
      console.log(data);
      alert("Form post good!");
    })
    .error(function() {
      alert(angular.toJson($scope.user));
    });
  };
});

我做错了什么？双向是如何工作的？我们如何知道数据何时从控制器传递到视图，反之亦然 - 从视图到控制器。我觉得这是我的误解所在。

感谢。

Answer 1

您的用户永远不会被定义或初始化。尝试使用username和userpass作为ng-model定义，如下所示：

<li>
  <input type="text" name="name" ng-model="username" placeholder="Username:">
</li>
<li>
  <input type='password' name="pass" ng-model="userpass" placeholder="Password:">
</li>

然后相应添加

 $http.post('/users', {name: $scope.username, pass: $scope.userpass})

或者，如评论中所述，在控制器中将$scope.user定义为{}

Answer 2

在控制器的第一行初始化$scope.user = {}。

basal.controller('LoginController', function($scope, $http) {
  $scope.user = {};
  $scope.submitLogin = function() {
...

在您的示例中，$scope.user == null。表单不会为您创建新的对象容器。

Angularjs：发布数据时出错。变量未定义

2 个答案: