根据Angular中的ng-repeat索引查找数组项答案

【问题标题】：Finding item of array base on the ng-repeater index in Angular根据Angular中的ng-repeat索引查找数组项
【发布时间】：2014-07-11 00:02:06
【问题描述】：

在我的应用程序中，我有 2 个对象数组。layout 数组用于创建 twitter 引导布局。这个数组如下所示：

 $scope.layout = [
  {c:[{size:12}]},
  {c:[{size:2},{size:3},{size:4},{size:3}]},
  {c:[{size:3},{size:5},{size:4}]}
];

你可以在jsbin中看到这个数组是如何工作的。另一个数组是items数组，这个数组如下所示：

 $scope.items =[
   {row:1,column:0,names:['Jack','Daniel']},
   {row:3,column:3,names:['Eli','Bill']},
   {row:2,column:1,names:['Fred','David']}
];

这是我使用的中继器：

<div ng-repeat="(ri,r) in layout" class="row">

  <div ng-repeat="(ci,c) in r.c" class="col-md-{{c.size}} col-sm-{{c.size}} col-xs-{{c.size}} col-lg-{{c.size}}  bi"> Row{{ri}}-Column{{ci}}
         //Maybe other repeater come here

  </div>
</div>

现在我想在 row 1 column 0 中显示 Jack , Daniel 并且此 1 和 0 是第一个和第二个中继器的中继器中的 r 和 c。所以当中继器创建 row 2 column 1 时也会在 $scop.item 上重复并找到相关的名称。但我不知道如何在 $scope.item 中找到项目。这是我的 jsbin

【问题讨论】：

你能在 DOM 显示之前修改你的数组吗？将两个数组合并或修改第二个数组以行号和列号为索引会更有效。

标签： javascript arrays angularjs angularjs-ng-repeat

【解决方案1】：

你可以这样做：

<div ng-repeat="(ri,r) in layout" class="row">
  <div ng-repeat="(ci,c) in r.c" class="col-md-{{c.size}} col-sm-{{c.size}} col-xs-{{c.size}} col-lg-{{c.size}} bi">
    {{getNames(ri, ci)}}
  </div>
</div>

getNames 在控制器中定义：

$scope.getNames = function(r, c) {
  var items = $scope.items;
  for (var i = 0; i < items.length; i++) {
    if (items[i].row == r && items[i].column == c) {
      return items[i].names;
    }
  }
  return '';
};

演示：http://jsbin.com/sumuwigo/1/edit

【讨论】：