Question

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

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

表格标签存在于表格周围，输入字段位于td的内部。

现在解决问题（制作清单）。

问题1：由于我循环使用此数据表，因此我将所有行的ng-model设置为相同，因此内容字段例如将包含ng-model =“record.conent”每一行。当我同时编辑2行或更多行时，我的字段模式会影响所有打开的行，并设置为我先打开的行。 Ng-pattern由一个函数设置，该函数根据我选择的记录类型返回正则表达式。见下图：

enter image description here

问题2：如果我按下编辑并开始编辑某个字段，并且我将该字段置于我的ng-pattern未获得匹配的失败状态，然后按取消至ng-switch仅回到文本，整个ng-model被清除干净。如何在循环中保留初始值？该模型似乎在网站上的任何地方都在更新。看下面的图片：

enter image description here 然后我取消...... 记录内容被删除

最后一个问题是......我是否正确行事？我觉得我已经把自己建在了角落里。

下面的模板代码：

<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>

Answer 1

对于第二个问题，您可以将记录的起始值设置为ng-init的{{1}}属性。然后，当调用cancel函数时，只需将字段的值设置回初始值。

例如，

<td>

然后在取消方法集<td class="domains-td" ng-switch on="record.edit" style="width: 10%;" ng-init="initialValue=record.prio">内。

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

Answer 2

记录每次重复时都处于不同的范围内，因此它的值并不相同。 UI上的不同值证明了这一点。＃1的问题不是因为你有相同的记录，它与HTML5验证有关，因为你有相同的输入名称。尝试呈现唯一名称，例如：name =“content - {{record.id}}”

Answer 3

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

Answer 4

好的，第一个问题的解决方案是使用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>

编辑每一行的数据表问题

最后一个问题是......我是否正确行事？我觉得我已经把自己建在了角落里。

4 个答案: