1

我正在构建一个域管理工具，我选择一个域，然后我ng-repeat在一个表中的所有域记录。对于每一行，我还添加了一个“编辑”和“删除”按钮。

所有行都连接到一个ng-switch. 当我在一行上按编辑时，它会变成<input>允许我编辑单行的字段。

表格标签存在于表格周围，输入字段位于 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 回答
1

对于第二个问题，您可以将记录的起始值设置ng-init为<td>. 然后当调用取消函数时，只需将字段的值设置回初始化值。

例如，

<td class="domains-td" ng-switch on="record.edit" style="width: 10%;" ng-init="initialValue=record.prio">

然后在cancel方法里面设置record.prio = initialValue。

您可能需要进行一些测试以确保如果您保存它然后再次编辑它并取消它会恢复到正确的值，因为我相信 ng-init 仅在引导时保存一个值。

于 2013-08-29T18:11:14.690 回答
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 回答
0

我认为您确定了问题 1 的问题，因为 ng-model 对于所有行都是相同的，因此当您编辑一个时，所有行的显示都会受到影响。我认为您需要找到一种方法来影响domain.data而不是记录中的信息。

于 2013-08-29T18:14:08.100 回答