Angular表单提交更新用户详细信息失败

4

目标

表单提交后应更新用户详细信息。当用户输入信息时,网站应显示用户详细信息。请注意,“novalidate”已启用,且“email”输入是必需的(因此只有在提交正确的电子邮件时才会出现user.email信息)。

实时演示

http://plnkr.co/edit/z9ActiAn7sAIeY83xkxO?p=preview

index.html

<!DOCTYPE html>
<html ng-app="formExample">

<head>
  <title>Anna Dowlin</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
  <script src="app.js"></script>
</head>

<body>
  <div ng-controller="SubmitCtrl">
    <p>Insert Email Below and watch User information be updated</p>
    <form novalidate>
      <input type="email" placeholder="Your email" ng-model="user.email" required>
      <input type="submit" ng-click="submit(user)">
    </form>
  </div>
  <pre>form = {{user | json}}</pre>
</body>

</html>

app.js

(function() {

  var app = angular.module('formExample', []);

  app.controller('SubmitCtrl', ['$scope',
    function($scope) {
      $scope.master = {};

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

    }
  ]);
});

问题

  1. 我不确定我在这里出了什么问题。如您从LIVE DEMO(http://plnkr.co/edit/z9ActiAn7sAIeY83xkxO?p=preview)所见,预览不会呈现“{{user | json}}”。 {{user | json}}未渲染

  2. 如果将app.js放入HTML的


啊,我看到下面的答案对你有用了。太好了! - Paul Fitzgerald
@PaulFitzgerald,请查看Jacob Buczarski的回复 - 问题是由于<prev>不包含在< div >(控制器所在的位置)中引起的。关于plunker,请检查是否有任何浏览器扩展程序干扰了Plunker的操作。 - jonplaca
是的,我看到它对你起作用了,我也想说我也没有给他投反对票。 - Paul Fitzgerald
1个回答

3

您的预览位于含有ng-controller的div外。请将其移动到div中。


这个解决方案可行,感谢您解决了一个简单的问题(它让我发疯了)!预览必须在调用控制器的<div>内部,否则无法获取用户信息。附言:之前并不是我给你点了踩。 - jonplaca

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接