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

Question

我用我的代码创建了一个 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的东西- 用户可以单击复选框，它将切换隐藏/显示表列。

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

Answer 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