0

ユーザーフォームの作成に使用しようとしてng-repeatいますが、少し苦労しています。signupForm.modelBindings入力を配列内の名前でスコープにバインドすると、名前がinput値として設定されますが、明らかにそれは私が望んでいるものではありません。入力を空のままにして、入力をスコープにバインドするにはどうすればよいですか?

PS：私はこれを非常に面倒な方法でやろうとしているように感じます.値を含む多くの配列を作成することなく、私が望むものを達成するためのさらに良い方法はありますか?

編集:より良い解決策を見つけましたが、入力が空でないという問題がまだあります。更新されたコードを見てください。

<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 = '';
4

1 に答える 1

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"

私は少し怠け者なので、説明、タイプなどをバックエンドに送り返します。

そのようなモデルが時々変更されることが想定されている場合は、2 番目のオプションの方が簡単かもしれません。

于 2015-02-17T15:11:31.160 に答える