【问题标题】:ngRepeat momentarily shows duplicated listngRepeat 暂时显示重复列表
【发布时间】:2015-12-22 00:26:54
【问题描述】:

我有一个在单击按钮时弹出的模式。模态的内容是项目列表。此列表存储在控制器中,并由来自 GET 请求的响应的一些数据填充。

每当我重复打开模式时,隐式调用列表的更新时,我会立即看到列表的多个副本 - 每次单击大约一个副本。然后显示的列表会自行解析为列表中实际存储的内容。

这可能是控制器或 html 的问题,还是 ngRepeat 的某种副作用?

以下是html文件中的sn-ps:

<li ng-repeat="itemin vm.items">{{item.name}}</li>

<a href="#" onclick="togglePanel('Panel')" ng-click= "vm.getItems()">View Items</a>

从控制器:

getItems(): angular.IPromise<core.IItem> {
        var self: Controller = this;
        return this.itemDataService.getItems()
        .then(function(response: any): angular.IPromise<core.IItem> {
          self.items = response.data;
          return response;
        },
        function(response: any): angular.IPromise<core.IItem> {
          self.items = [];
          return response;
        });
    }

如果您需要查看更多代码,请询问。

编辑:额外代码... onClick 被调用:

function toggleSavedSearchPanel(id)
{
    var e = document.getElementById(id);

    if (e.style.display == 'block' || e.style.display=='')
    {
        e.style.display = 'none';
    }
    else
    {
        e.style.display = 'block';
        e.focus();
    }
}

【问题讨论】:

  • 问题出在我的 CSS 代码上;有一个过渡:列表的 css 中有 0.2 秒。删除它解决了我所有的问题。

标签: angularjs angularjs-directive get typescript ng-repeat


【解决方案1】:

更多代码会有所帮助。例如,您在 a 标签上有一个 onclick 属性,外加 ng-click 事件。如果不知道 onclick 函数在做什么,很难说发生了什么。

另外,在视图中,您将项目附加到名为 vm 的作用域上的属性,但在您的控制器中,您将其直接附加到 this/self。是否有更多代码可以将其移至 vm 对象?

听起来您正在处理 API 调用的计时问题,但如果不查看更多代码就很难确定。

【讨论】:

  • 关于你的第二段,我猜他正在使用 controller as 语法。
  • 我猜也是这样,但如果没有看到该代码,我们无法确定。
  • 我已经添加了 onClick 事件的代码。 ng-click 调用我最初发布的 getItems() 函数。 “vm”是对我正在使用的控制器的引用——我希望你能相信我。我认为问题很可能归结为时间问题 - 如果是这种情况,我该如何解决?
  • 我发现了问题;有一个过渡:列表的 css 中有 0.2 秒。删除它解决了所有问题。感谢您的帮助。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-01-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多