Question

目的

表单提交应更新用户详细信息。用户输入信息时，网站应显示用户详细信息。请注意，“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);
      };

    }
  ]);
});

问题

我不确定我在哪里错了。正如您在现场演示（http://plnkr.co/edit/z9ActiAn7sAIeY83xkxO?p=preview）中看到的那样，预览不会呈现“{{user | json}}。
如果我将app.js放入HTML中的标签并删除“... var app =”，那么{{user | json}}消失（但不完全渲染）。为什么是这样？

Answer 1

您的预览位于您的div之外，使用ng-controller。尝试将其移动到div中。

用于更新用户详细信息的Angular Form提交 - 失败

的的index.html

的 app.js

1 个答案: