如何使用来自另一个页面的数据预填充表单域答案

【问题标题】：How to pre-populate form-fields with data from another page如何使用来自另一个页面的数据预填充表单域
【发布时间】：2015-08-31 10:25:38
【问题描述】：

我有一个看起来像这样的 angularJS 表单

<section>

  <form role="form" ng-if="authenticated != true" 
     name="registerForm" ng-submit="register(registerForm)" novalidate>
   <input type="email" class="form-control" ng-model="user.email" name="email" >
    <input type="email" class="form-control" ng-model="user.password1" name="email" >
    <input type="email" class="form-control" ng-model="user.password2" name="email" >
  </form>
</section>

还有 javascript：

    'register': function(username,password1,password2,email,more){
        var data = {
            'username':username,
            'password1':password1,
            'password2':password2,
            'email':email
        }
        data = angular.extend(data,more);
        return this.request({
            'method': "POST",
            'url': "/registration/",
            'data' :data
        });
    },

我在登录页面上有另一个表单，其中包含字段email 和一个按钮。当我按下按钮时，我希望用户引导到上面预先填充了电子邮件字段的页面。我将如何做到这一点？

【问题讨论】：

您可以在 URL 参数中传递它，也可以将其放入 Angular 服务中

标签： angularjs

【解决方案1】：

如果您想采用 URL 参数路由，请尝试以下操作：

在您的着陆页中，将此代码添加到您的按钮触发的函数中：

$location.path("/form").search("email",ctrl.email);

其中“/form”是表单页面的路径，ctrl.email 是登录页面中电子邮件字段的 ng-model。

然后在表单页面的控制器上添加：

var pathQueryVals = $location.search();
if (!!pathQueryVals.email){
      user.email = pathQueryVals.email;
}

这将从您的路径中提取查询参数，如果“电子邮件”存在，那么它将将该值分配给您的 user.email 字段并预填充该字段。

【讨论】：