我有一张表,它的所有列(一个列除外)都由一个后端调用填充。 单独调用服务器以获取最后一列的数据。 我要注意的是,有时此数据正确显示在表上,而有时却不正确。 可能是由于第二次ajax调用的时间安排。 想知道正确的方法应该是解决此问题。 这是我所拥有的

HTML:

<tr ng-repeat=“item in ctrl.items">
  <td>{{ item.name }}</td>
  <td>{{ item.desc }}</td>
  <td><i class=“icon icon-check”></i> ng-class=“{ ‘active': ctrl.isActive(item) }”></td>
</tr>

控制器:

loadItems() {
  myService.getItems().then( (response) => {
       this.items = response;
       this.loadColors();
  });
}

loadColors() {
  myService.getColors().then( (response) => {
     _.forEach(response, (val, key) => {
          _.forEach(this.items, function(item) {
               if (item.id === key) {
                    item.colors = val;
               }
          });
     });
  });
}

isActive(item) {
    return _.some(item.colors, function (color) {
        return color === ‘green’ || color === ‘blue';
    });
}

最后一列(图标检查)没有始终应用活动的CSS类。 有时,它在页面重新加载后有效,有时却不起作用。 我在这里肯定做错了什么...我试图在$ timeout和$ scope。$ apply中包装this.loadColors() ,但似乎都没有解决。

#1楼 票数:1 已采纳

由于您的输出取决于两个不同调用对结果的响应,因此您需要将它们链接起来,以便在两个完成后都可以得到结果。

loadItems() {
  myService.getItems().then( (response) => {
       this.items = response;
       myService.getColors().then( (colorResponse) => {
     _.forEach(colorResponse, (val, key) => {
          _.forEach(this.items, function(item) {
               if (item.id === key) {
                    item.colors = val;
               }
          });
     });
  });
  });
}

这应该可以解决问题。

编辑我修改了我的代码,可能是因为较早分配了项目。 在修改的代码中,我将其移至最后一步。

loadItems() {
      myService.getItems().then( (response) => {
           var items = response;
           myService.getColors().then( (colorResponse) => {
         _.forEach(colorResponse, (val, key) => {
              _.forEach(items, function(item) {
                   if (item.id === key) {
                        item.colors = val;
                   }
              });
         });
         this.items = items; //Assigning it to items after we have set the colors.
      });
      });
    }

  ask by Prabhu translate from so

未解决问题?本站智能推荐:

4回复

简单的ng-repeat无法正常工作

我的angularjs应用中有以下代码,为什么这个简单的ng-repeat无法正常工作? var app = angular.module('anApp', []); app.controller('aCtrl', function($scope) { $scope.data = [""
4回复

带有ng-repeat的html表中的替代行着色

我有一个表,其中使用ng-repeat填充值。 我需要用绿色和黄色为表格的行上色。 我没有ng-repeat尝试了以下方法,它可以工作。 .table-striped>tbody>tr:nth-of-type(odd) { background: yellow !impo
2回复

键盘控制带有单选框的ng-repeat表

为了介绍一些数据结果,我使用了boostrap-ui modal。 我已经为模态和控制器构建了一个模板。 我希望能够使用键盘在桌子上从一个项目移动到另一个项目。 我想浏览单选框底线,我希望能够使用键盘在单选框之间切换:箭头键我的桌子看起来像这样 代码是这样的: 模态.html 控制器
1回复

通过使用ng-repeat使用特定的$index添加表行

在我的要求下,我必须使用ng-repeat绑定/显示在html表中,还必须向该特定点击/索引动态添加行。 我尝试过,但无法解决。 <table class="table table-bordered"> <thead> <th>S.No</th
2回复

Mootools.addEvent无法进入ng-repeat内部?

因此,我尝试使用mootools创建拖放车,如此处所示: demo 。 我可以到那里使代码正常工作,但是当我尝试编辑其html以使其看起来像html beloe时,它将停止工作。 css仍然可以像人们期望的那样适用,并且ng-repeat之外的div工作正常。 但是,我非常确定mootoo
1回复

Javascriptng-href无法在ng-repeat中工作

单击时,我手风琴正在打开。 当我不使用ng-repeat时,一切工作都很好,但是一旦使用它,它就不会进入我的href地址,而会进入/ home。 这是我的HTML代码: 这是我的JS代码: 最后是我的CSS代码:
1回复

ng-repeat和选定的行

这是上一个问题angularjs在表内重复表行的延续 我无法确定是否存在以下问题的解决方案。 我希望能够在单击时突出显示当前行(并为描述行和“子”行单独进行处理,但在实际的行数组中我没有单独使用它们-我只是使用ng-重复第一行两次重复开始和ng重复结束方法)。 我目前有以下代码:
2回复

没有html元素的ng-repeat

我正在尝试生成一个博客列表,但我在使用 ng-repeat 时遇到了问题。 我的清单看起来像这样 因此,在每 2 个列表项之后,我就有一个跨度来调整我接下来的 2 个框。 现在我有这个角度代码。 而且我不知道如何在每第二个列表项之后生成该跨度。 提前谢谢你,丹尼尔!