防止角度实时按字母顺序对列表项进行排序答案

【问题标题】：Prevent angular from sorting list item alphabetically in real time防止角度实时按字母顺序对列表项进行排序
【发布时间】：2015-11-10 12:27:08
【问题描述】：

我正在尝试使用 angularjs 列表修复错误。

当编辑列表中的项目时，记录会实时按字母顺序排序，并跳转到列表中的新位置。

这被证明是有问题的，因为当有人试图编辑记录时，例如“ABC”，如果他们在它前面放一个“Z”，它会跳转到列表中的最后一页。

文本输入值直接绑定到模型，我怀疑这是问题所在，因为 data-ng-repeat 指令确保数据按字母顺序排序。

因此，我尝试将 data-ng-model 绑定更改为 data-ng-bind，因为我的理解是，如果输入值发生更改，ng-model 会更新模型，而 ng-bind 不会。

如果有任何建议，我将不胜感激。

HTML：

<form name="companies" class="clearfix" novalidate data-ng-  hide="loadingIcon">
    <table>
        <tbody>
            <tr data-ng-repeat="company in data | orderBy: 'NAME' | siftPage: startIndex: endIndex">
                <td width="60%">
                    <span data-ng-hide="edit"> {{ company.NAME }} </span>

                    <div class="form-field col-sm-9" data-ng-show="edit">
                        <input type="text" data-ng-bind="company.NAME" />
                    </div>
                </td>
                <td>
                    <a class="icon edit" data-ng-click="edit = !edit; changed = edit ? edited(company) : changed(company);" href="#"></a>
                </td>
                <td>
                    <a class="icon delete" data-ng-click="removeCompany(company)" href="#"></a>
                </td>
            </tr>
        </tbody>
    </table>

我是 Angular 的新手，所以如果我没有提供足够的信息，请原谅我。我将根据要求更新更新，提供任何进一步的信息。

【问题讨论】：

您希望在编辑完成后立即对数据进行排序吗？还是在第一次渲染后不再排序？有两种可能的解决方案，具体取决于您在这里想要的结果。
考虑到用户可能不得不一个接一个地编辑多条记录，因此在用户完成更新后重新排序列表是有意义的。
如果您的意思是说您希望仅在完成多次编辑后才进行重新排序，那么您需要某种方式让用户表示编辑已完成（保存按钮，传统上）。然后，此按钮可以触发排序功能，而不是 orderBy:，类似于提供的答案。

标签： angularjs list sorting

【解决方案1】：

我相信真正的问题是带有 orderBy: 'Name' 子句的 ng-repeat。它将确保即使在编辑后也能保持顺序。

如果您想在编辑之前先订购，请将名称作为 initialName 复制到每个 json 对象上，并将 orderBy 设置为“initialName”。由于您不会在编辑时更新初始名称，因此它不会通过 order by 更新。

如果您将副本创建为创建 initialNames 的函数，则可以通过按钮调用它以重新排序数据。

【讨论】：