AngularJS - 如何在复选框选择中显示/隐藏表格列 - 从嵌套的 ng-repeat 生成答案

【问题标题】：AngularJS - How to show/hide table column on checkbox selection - Generated from nested ng-repeatAngularJS - 如何在复选框选择中显示/隐藏表格列 - 从嵌套的 ng-repeat 生成
【发布时间】：2018-02-21 22:14:38
【问题描述】：

我创建了一个 Plunker，我的代码显示了问题 here：

当您单击例如“de”复选框它切换表标题的显示/隐藏 - 但不是列标题下的 <textarea> 值，对应于语言环境（在本例中为“de”），这是我目前正在尝试的工作。

我想不出一种方法来链接<textarea>，具体取决于复选框的locale.Selected 值。因此，当locale.Locale == res.LocaleID 我想根据locale.Selected 值显示/隐藏时。

<table class="table">
    <tr>
        <th>Resource Id</th>
        <th ng-repeat="locale in view.resourceGridResources.Locales" ng-show="locale.Selected">
            {{locale.Locale ? locale.Locale : "invariant" }}
        </th>
    </tr>
    <tr ng-repeat="resource in view.resourceGridResources.Resources">
        <td>{{resource.ResourceId}}</td>
        <td ng-repeat="res in resource.Resources">
            <textarea ng-model="res.Value"
                      ng-blur="view.saveGridResource(res)"
                      style="min-width: 300px"
                      //trying to get to locale.Selected here - how get index 'x'?
                      ng-show="view.resourceGridResources.Locales[x].Selected">
                      </textarea>
        </td>

    </tr>
</table>

尝试实现 here 之类的东西 - 用户可以点击复选框，它会切换隐藏/显示表格列。

请注意：我的演示 plunker 只是我更大的项目中的问题示例，因此我无法控制更改 json 格式等。

【问题讨论】：

标签： javascript angularjs angularjs-ng-repeat ng-show

【解决方案1】：

您不必在 JS 中编写任何函数。由于resource.Resources 中的项目数与view.resourceGridResources.Locales 中的项目数相同。

HTML

    <td ng-repeat="res in resource.Resources" ng-show="vm.resourceGridResources.Locales[$index].Selected">        
        <textarea ng-model="res.Value"
                  style="min-width: 300px"></textarea>
    </td>

打工者：http://plnkr.co/edit/Al4KdHlCV2uo9HQ2qNt7?p=preview

【讨论】：

No 但是resource.Resources的$index会和view.resourceGridResources.Locales的$index并行？

【解决方案2】：

将此方法添加到您的控制器：

vm.check = function(res) {
  return vm.resourceGridResources.Locales.find(function(loc) {
    return loc.Locale === res.LocaleId && loc.Selected;
  });
};

将此条件添加到您的视图中：

<td ng-repeat="res in resource.Resources" ng-show="vm.check(res)">

一个工作演示：http://plnkr.co/edit/neQtu8qxQQVP2kDIY5ru?p=preview。

【讨论】：