双重重复以展平嵌套对象

时间:2016-03-31 12:48:37

标签: html angularjs angularjs-ng-repeat

我有一个用法,我已用ng-repeat-start解决了这个问题。它目前看起来像这样:

控制器

$scope.providers = [
  'Site Hosting',
  'Best Hosting',
  'Fantastic Hosting'
];

$scope.providerColumns = {
  price: {
    text: 'Price',
    exposed: true
  },
  site: {
    text: 'Website',
    exposed: true
  },
  phone: {
    text: 'Phone Number',
    exposed: false
  }
};

模板

<div class='table-header-row'>
  <div class='first-header-cell' ng-repeat='obj in firstCellsHeaders'>
    {{obj.text}}
  </div>
  <div class='middle-header-cell' ng-repeat-start='prov in providers' ng-if='providerColumns.price.exposed'>
    {{prov}} {{providerColumns.price.text}}
  </div>
  <div class='middle-header-cell' ng-if='providerColumns.site.exposed'>
    {{prov}} {{providerColumns.site.text}}
  </div>
  <div class='middle-header-cell' ng-repeat-end ng-if='providerColumns.phone.exposed'>
    {{prov}} {{providerColumns.phone.text}}
  </div>
  <div class='last-header-cell' ng-repeat='obj in lastCellsHeaders'>
    {{obj.text}}
  </div>
</div>
<div class='table-row'>
  <div class='first-cells' ng-repeat='obj in firstCells'>
    {{obj.text}}
  </div>
  <div class='middle-cells' ng-repeat-start='prov in providers' ng-if='providerColumns.price.exposed'>
    {{data[prov].price}}
  </div>
  <div class='middle-cells' ng-if='providerColumns.site.exposed'>
    {{data[prov].site}}
  </div>
  <div class='middle-cells' ng-repeat-end ng-if='providerColumns.phone.exposed'>
    {{data[prov].phone}}
  </div>
  <div class='last-cells' ng-repeat='obj in lastCells'>
    {{obj.texLine2}}
  </div>
</div>

它本质上是一个由div构建的表格,以便在角度完成渲染后重新排列列。

现在我已经意识到ng-repeat-start中表示的对象比我之前想象的更具活力,我希望能够有一个平方 ng-repeat,即没有嵌套元素的嵌套重复,非常类似于在ng-repeat元素上使用tbody的经常应用的解决方案,然后在其中的ng-repeat元素上添加tr,这基本上是一种扁平的嵌套效应。我需要一个水平元素的解决方案,最好是div s。但是,我无法以任何方式将它们捆绑在一起,因此不会嵌套div s或类似的东西。理想情况下,它看起来像这样:

<div ng-repeat='prov in providers' ng-repeat='col in providerColumns' ng-if='col.exposed'>
  {{data[prov][col]}}
</div>

有什么想法吗?

1 个答案:

答案 0 :(得分:1)

改为:

OnPropertyChanged(nameof(SomeText));

为什么不使用嵌套的ngRepeat,如下所示:

<div ng-repeat='obj1 in parent' ng-repeat='obj2 in obj1'>
    {{content[obj1][obj2]}}
</div>