Angular 在 ng-repeat 中使用 ng-model 时，页面加载时输入不为空

Question

我正在尝试使用 ng-repeat 创建用户表单，但有点费力。当我使用 signupForm.modelBindings 数组中的名称将输入绑定到范围时，名称被设置为 input 值，显然这不是我想要的。如何将输入绑定到范围，同时将输入留空？

P.S：感觉我在尝试用一种非常笨拙的方式来做这件事，有没有更好的方法来实现我想要的而不用创建很多包含值的数组？

编辑： 我找到了更好的解决方案，但我仍然遇到输入不为空的问题。查看更新后的代码：

<tr ng-repeat="row in signupForm" 
    class="data-row">
    <td class="label-cell data-cell">
        <label ng-bind="(row.description) + ':'"></label>
    </td>
    <td class="data-cell">
        <input type="{{row.type}}" ng-model="row.model"
               placeholder="{{row.description}}" 
               class="round input">
    </td>
    <td class="error-cell data-cell">
        <span class="error">*</span>
    </td>
</tr>

表格信息：

$scope.signupForm = [
    {
        description: 'Firstname',
        type: 'text',
        model: 'user.firstname'
    },
    {
        description: 'Lastname',
        type: 'text',
        model: 'user.lastname'
    },
    {
        description: 'Date of birth',
        type: 'text',
        model: 'user.dateOfBirth'
    },
    {
        description: 'Country',
        type: 'text',
        model: 'user.country'
    },
    {
        description: 'Display name',
        type: 'text',
        model: 'user.displayName'
    },
    {
        description: 'E-mail',
        type: 'email',
        model: 'user.email'
    },
    {
        description: 'Password',
        type: 'password',
        model: 'user.firstname'
    },
    {
        description: 'Confirm password',
        type: 'password',
        model: 'user.confirmPassword'
    }
]

我尝试通过将范围设置为空字符串来清除它，但它不起作用：

$scope.firstname, $scope.lastname, $scope.dateOfBirth, 
$scope.country, $scope.displayName, $scope.email, 
$scope.password, $scope.confirmedPassword = '';

Answer 1

让我们拥有这个对象：

$scope.user = {
     firstName: '',
     lastName: '',
     ...
}

您的表单信息如下：

$scope.signupForm = [
{
    description: 'Firstname',
    type: 'text',
    model: 'firstname'
},
{
    description: 'Lastname',
    type: 'text',
    model: 'lastname'
},

您应该可以通过这种方式访问它：

ng-model="user[row.model]"

编辑（基于意见）：

视情况而定，此解决方案可能是一个不错的选择。这样，您只需发送对象 "user" 来保存它。

我会做得有点不同。我会从后端收到这个对象：

[{
   description : "Firstname",
   type: "text",
   value: ""
 },
 {
   description:
   ...

而且我会以这种方式拥有我的 ng-model :

 ng-model="row.value"

而且因为我有点懒，我会把描述、类型……发回后端。

如果这种模型有时会发生变化，那么第二种选择可能会更容易。

Angular 在 ng-repeat 中使用 ng-model 时，页面加载时输入不为空

Angular inputs not being empty on page load when using ng-model inside an ng-repeat

javascript

angularjs

angularjs-ng-model