Plunker

Question

我正在尝试在离子框架中制作表格或网格视图。我能够制作该表但是看起来不像我需要的那样请查看我在图像中的表格视图。

这是我的代码。实际上我还有标题＆＃34; Invoice＃＆＃34;和＆＃34;帐户名称＆＃34;它们应该变成背景灰色。实际上我看到如果我们连续两列，它需要50％50％的窗口宽度。但是当有3列柱时需要33.33％宽度但是在我的情况下它们不能占据我的位置做错了实际上我是动态生成列现在它是两个但可能是后五个。我需要它们占用相等的总宽度空间。这可以添加＆＃34; +＆＃34;在最后一栏？

这是代码

<div class="row">
 <div ng-repeat="d in data | filter:{checked: true}">
     <div class="col">{{d.label}}</div>
     <div  class="row" ng-repeat="column in displayData">
      <div class="col" ng-repeat="field in column.columns" ng-show="d.fieldNameOrPath==field.fieldNameOrPath">{{field.value}}</div>
    </div>
 </div>
 </div>

http://plnkr.co/edit/X0PQov1UA2yEbx8qaOFl?p=preview

Answer 1

这是您的Plunker的工作版本。要查看添加和删除的列，请点击右侧标题中的齿轮图标。

Plunker

要使网格正确布局，您无法嵌套重复。这意味着您必须稍微更改ng-show以直接观察数据模型上的已检查值。

在它最基本的形式中，它看起来像这样：

<div class="row">
  <div class="col" ng-repeat="d in data | filter:{checked: true}">{{d.label}}</div>
</div>
<div class="row" ng-repeat="column in displayData | filter: query">
  <div class="col" ng-repeat="field in column.columns" ng-show="data[$index].checked && data[$index].fieldNameOrPath===field.fieldNameOrPath">{{field.value}}</div>
</div>

您会注意到Ionic会自动处理网格的全宽，正确布局后，它会自动均匀地分隔您的列。这是因为它使用了flexbox。这也允许您告诉特定列他们应该使用多少空间。其余的列自然会分布以占据剩余的空间。在演示中，我为齿轮和细节按钮添加了一列，并为它们提供了col-10课程。这将强制这些列占据屏幕宽度的10％。有关网格如何在Ionic中工作的更多信息，请阅读文档 here 。

我还注意到你似乎有很多功能，你正在尝试做一些事情，比如管理检查值的更新方式。别那样做。 这就是AngularJS和ng-model指令的美妙之处。如果该范围内的属性不存在，Angular会为您创建它，如果确实存在，则只更新它。例如，请注意我通过设置ng来简化搜索工作的方式-model值并将其传递给过滤器。我没有必要创建$ scope.query，因为ngModel为我做了这个。同样，我删除了所有的功能和对“检查”的引用。来自控制器的值和一切正常，因为ngModel会自动将checked属性添加到数据模型中。

如何使表格在图像中显示？

1 个答案:

Plunker