1

私はドメイン管理ツールを構築しています。ドメインを選択ng-repeatし、テーブル内のすべてのドメイン レコードを選択します。行ごとに、「編集」ボタンと「削除」ボタンも追加します。

すべての行は に接続されていng-switchます。行で編集を押すと、フィールドに変わり、<input>単一の行を編集できるようになります。

form タグはテーブルの周りにあり、入力フィールドは td 内にあります。

さて、問題です(リストを作成します)。

問題 1: このデータテーブルをループアウトするので、ng-model をフィールドごとにすべての行で同じに設定します。たとえば、コンテンツ フィールドの各行には ng-model="record.conent" が含まれます。2 つ以上の行を同時に編集すると、フィールド パターンが開いているすべての行に影響し、最初に開いた行に設定されます。Ng-pattern は、選択したレコード タイプに応じて正規表現を返す関数によって設定されます。以下の画像を参照してください。

ここに画像の説明を入力

問題 2: [編集] を押してフィールドの編集を開始し、フィールドがng-pattern一致しない失敗状態のままにしてから、[キャンセル] を押しng-switchてテキストのみに戻ると、全体ng-modelが消去されます。ループで初期値を保持するにはどうすればよいですか? モデルはサイトのいたるところで更新されているようです。下の写真を見てください:

ここに画像の説明を入力 それから私はキャンセルします... ここに画像の説明を入力 そして記録内容は消去されます

最後の質問は..私はこれを正しくやっていますか?追い詰められた感があります。

以下のテンプレートコード:

<form novalidate name="recordForm" class="css-form">

    <table class="table table-striped table-bordered table-white table-responsive swipe-horizontal" style="border: 1px #dbdbdb solid;" edit-record>

        <!-- Table heading -->
        <thead >
            <tr class="domains-tr-heading">
                <th>Sub</th>
                <th>Domain</th>
                <th>Type</th>
                <th>Address</th>
                <th>TTL</th>
                <th>Priority</th>
                <th></th>
            </tr>
        </thead>
        <!-- // Table heading END -->

        <!-- Table body -->
        <tbody>

            <tr ng-repeat="record in domain.data" class="gradeA" ng-controller="ChildEditRecordCtrl">

                <td ng-init="startingNameData = record.name" ng-switch on="record.edit" class="domains-td" style="width: 10%;">
                    <span ng-switch-default>{{record.name}}</span>
                    <span ng-switch-when="true">
                        <input type="hidden" ng-model="record.id" name="id" class="span12" style="margin: 0px;" required/>
                        <input type="text" ng-model="record.name" required style="margin: 0px;" class="span12 edit-record-input">
                    </span>
                </td>
    
                <td class="domains-td" style="width: 20%;">
                    {{ updateDomainForm.name }}
                </td>

                <td ng-init="startingTypeData = record.type" class="domains-td" ng-switch on="record.edit" style="width: 10%;">
                    <span ng-switch-default>{{record.type}}</span>
                    <span ng-switch-when="true">
                        <select style="margin: 0px;" ng-model="record.type" ng-options="c for c in domainRecordTypes" class="span12">

                        </select>
                    </span>
                </td>

                <td ng-init="startingContentData = record.content" class="domains-td validation-dropdown-error-parent" ng-switch on="record.edit" style="width: 25%;">
                    <span ng-switch-default>{{record.content}}</span>
                    <span ng-switch-when="true">
                        <span class="validation-dropdown-error" ng-show="recordForm.content.$error.pattern">
                            Invalid {{ addRecordForm.type }} record
                        </span>
                        <input type="text" ng-model="record.content" name="content" required style="margin: 0px;" class="span12 edit-record-input" ng-pattern="/^([1-9]?\d|1\d\d|2[0-4]\d|25[0-5])\.([1-9]?\d|1\d\d|2[0-4]\d|25[0-5])\.([1-9]?\d|1\d\d|2[0-4]\d|25[0-5])\.([1-9]?\d|1\d\d|2[0-4]\d|25[0-5])$/" required />
                    </span>
                </td>

                <td ng-init="startingTTLData = record.ttl" class="domains-td" ng-switch on="record.edit" style="width: 10%;">
                    <span ng-switch-default>{{record.ttl}}</span>
                    <span ng-switch-when="true">
                        <input type="number" ng-model="record.ttl" required style="margin: 0px;" class="span12 edit-record-input" />
                    </span>
                </td>

                <td ng-init="startingPrioData = record.prio" class="domains-td" ng-switch on="record.edit" style="width: 10%;">
                    <span ng-switch-default>{{record.prio}}</span>
                    <span ng-switch-when="true">
                        <select style="margin: 0px;" ng-model="record.prio" ng-options="c for c in domainRecordPriorities" class="span12 edit-record-input">
                        </select>
                    </span>
                </td>

                <td class="domains-td" ng-switch on="record.edit" style="width: 14%">

                    <button ng-switch-when="true" ng-if="hideRecordType(record.type)" ng-click="editRecord(record, domainId); record.edit=false" type="submit" class="btn btn-block btn-primary btn-icon" style="width: 55px; float: left; margin-right: 5px; margin-top: 5px;"><i></i>Save</button>
                    <button ng-switch-when="true" ng-if="hideRecordType(record.type)" ng-click="record.edit=false; record.name = startingNameData; record.type = startingTypeData; record.content=startingContentData; record.ttl = startingTTLData; startingPrioData = record.prio" class="btn btn-block btn-primary btn-icon" style="width: 55px; float: left; margin-top: 5px;"><i></i>Cancel</button>

                    <button ng-switch-when="1" ng-if="hideRecordType(record.type)" ng-click="deleteRecord(record.id, domainId); record.edit=false;" class="btn btn-block btn-danger btn-icon" style="width: 55px; float: left; margin-right: 5px; margin-top: 5px;"><i></i>Delete</button>
                    <button ng-switch-when="1" ng-if="hideRecordType(record.type)" ng-click="record.edit=false" class="btn btn-block btn-primary btn-icon" style="width: 55px; float: left; margin-top: 5px;"><i></i>Cancel</button>

                    <button ng-switch-default ng-if="hideRecordType(record.type)" ng-click="record.edit=true;" class="btn btn-block btn-primary btn-icon" style="width: 55px; float: left; margin-right: 5px; margin-top: 5px;"><i></i>Edit</button>
                    <button ng-switch-default ng-if="hideRecordType(record.type)" ng-click="record.edit=1;" class="btn btn-block btn-danger btn-icon" style="width: 55px; float: left; margin: 0 auto; margin-top: 5px;"><i></i>Delete</button>

                    <span style="clear:both;"></span>
                </td>
            </tr>

        </tbody>
        <!-- // Table body END -->

    </table>

</form>
4

4 に答える 4

1

レコードは繰り返すたびに異なるスコープにあるため、実際には同じ値ではありません。UI の異なる値は、この点を証明しています。#1の問題は、同じレコードがあるためではなく、HTML5検証に関連しており、同じ入力名があるためです。次のような一意の名前をレンダリングしてみてください: name="content-{{record.id}}"

于 2013-08-29T19:33:12.543 に答える
0

最初の問題の解決策は、動的に作成されたフィールドを検証するために ng-form を使用することです。

<ng-form name="innercContentForm">
    <span class="validation-dropdown-error" ng-show="innercContentForm.content.$error.pattern">
        Invalid {{ addRecordForm.type }} record
    </span>
    <input type="text" ng-model="record.content" name="content" required style="margin: 0px;" class="span12 edit-record-input" ng-pattern="/^([1-9]?\d|1\d\d|2[0-4]\d|25[0-5])\.([1-9]?\d|1\d\d|2[0-4]\d|25[0-5])\.([1-9]?\d|1\d\d|2[0-4]\d|25[0-5])\.([1-9]?\d|1\d\d|2[0-4]\d|25[0-5])$/" required />
</ng-form>
于 2013-08-29T20:20:40.370 に答える