私はドメイン管理ツールを構築しています。ドメインを選択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>