Angular 替换数组时 ng-repeat 搞砸了

Question

我的应用程序中有一个 ng-repeat 并观察到以下行为：当替换 ng-repeat 背后的数据结构时，ng-repeat 会在短时间内将某些元素渲染成双倍，然后恢复正常状态。这会让我的用户感到困惑并且看起来很糟糕。知道什么会导致这种行为吗？

这是一个视频：我点击 "Favourisieren" 并观察左侧边栏中的项目变化。鼠标光标不可见。

https://nimbus.everhelper.me/client/notes/share/video/317494/o1sARUDmxVOzUZoD4LhyJ0PxsUMTC6cn/none/wz61446123052707/video.webw

这里是相关 ng-repeat 的源代码。 user.favourited_term 的数据结构只是一个普通的对象数组。

        <li ng-if='user && user.favourited_terms' ng-repeat="termOrCategory in user.favourited_terms">
            <a ng-click="handleMenuClick($event)">
                <i class="fa fa-star-o"></i>
                <span class="menu-item">
                    <h2>{{termOrCategory.term.name}}</h2>
                </span>
            </a>
        </li>

Answer 1

我找到了解决重复数据的方法。由于我的代码中没有按语句跟踪，angular 自动按数组索引跟踪数组项。这在插入新项目时不起作用。

通过插入 track by 语句可以轻松解决该问题，该语句唯一标识列表中的对象，如 id。在我的例子中，这有点复杂，通常只是 e 的轨道。 G。 yourObjectName.id 够了

ng-repeat="termOrCategory in user.favourited_terms track by termOrCategory.term.id + termOrCategory.is_category"

Angular 替换数组时 ng-repeat 搞砸了

Angular ng-repeat messing up when replacing array

javascript

rendering

2-way-object-databinding

angularjs