AngularJS - 即使没有条件，div 仍然显示答案

【问题标题】：AngularJS - div still shows even without conditionAngularJS - 即使没有条件，div 仍然显示
【发布时间】：2021-11-26 23:16:34
【问题描述】：

好的，我知道这个标题可能需要一些工作，但我不知道该怎么说。

这是设置。

我有一个（可能）通过ng-repeat 生成的大型表。所有的行都需要是可编辑的，但是当数据集很大时，所有这些绑定都会减慢爬行速度。我实际上可能要等待 20 秒以上才能加载大型集！

我们注意到，将数据转储为只读状态会显着减少加载时间。所以，我们想出了以只读方式加载它的想法，但是，当点击表格行时，它就变成了可编辑的。这是这样完成的。我有两个单元格输出。 editableRow 最初是 false。单击该行时，editableRow 变为 true。这个想法是，当editableRow 变为真时，我会看到另一个单元格。

（专有代码混淆）

                <TABLE-CELL class="value-col" ng-if="readtime.editableRow === true">
                    <input type="text" 
                    name="readingTime"
                    ng-model="<data model>" 
                    ng-disabled="<param>" 
                    ng-change="<function>"
                    ng-class="<classes>"
                    />                                                    
                </TABLE-CELL>
                <TABLE-CELL class="value-col" ng-if="readtime.editableRow === false">
                    <input type="text" 
                    placeholder="{{<data model>}}" 
                    ng-class="<classes>"
                    />                                                    
                </TABLE-CELL>

问题是，在点击时，两个单元格都可见。它实际上只在第一次点击时可见。随后的点击仍然可以做到，但是速度太快了，以至于人眼无法捕捉到。我知道它就在那里，因为我在鼠标单击时使用断点减慢了所有速度。这也表明当值变为真时会发生这种情况 - 打开第一个单元格，但第二个单元格不会在同一时刻消失。因此，它会导致某种“闪烁”。这似乎发生在我的实际代码之外，在 jQuery 内部，所以我不知道如何短路它。

我尝试使用ng-show/hide 来代替，这有点效果，但也完全否定了节省时间的方面，因为它实际上渲染了所有内容，并且花费了很长时间。我也试过ng-cloak，但没有任何效果。

它一直停止的断点（当我告诉它在事件侦听器上停止鼠标点击时）是jquery.js 中的以下代码：

        if ( !(eventHandle = elemData.handle) ) {
        eventHandle = elemData.handle = function( e ) {
            // Discard the second event of a jQuery.event.trigger() and
            // when an event is called after a page has unloaded
            return typeof jQuery !== strundefined && jQuery.event.triggered !== e.type ?
                jQuery.event.dispatch.apply( elem, arguments ) : undefined;
        };
    }

它击中那条线大约 4 次，并且在最后一个上，两个单元格都是可见的。然后，第二个消失了。

我没有想法，如果对此有任何想法，我将不胜感激。

【问题讨论】：

标签： angularjs

【解决方案1】：

我终于找到了一个可行的答案！

在此页面上：disable nganimate for some elements 接受的答案正下方的答案终于奏效了！

要对某些元素禁用 ng-animate，请使用遵循 Angular animate 范例的 CSS 类，您可以配置 ng-animate 以使用正则表达式测试该类。

配置

var myApp = angular.module("MyApp", ["ngAnimate"]);
myApp.config(function($animateProvider) {
    $animateProvider.classNameFilter(/^(?:(?!ng-animate-disabled).)*$/);
})

用法

只需将 ng-animate-disabled 类添加到您希望 ng-animate 忽略的任何元素。

【讨论】：