AngularJS

Question

我用我的代码创建了一个 Plunker 来显示问题 here:

正如您在点击例如'de' 复选框它切换 show/hide 的 table 标题 - 但不是列标题下的 <textarea> 值，对应于语言环境（在本例中为 'de'），这就是我目前正在努力工作的。

我想不出一种方法来 link <textarea> 取决于复选框的 locale.Selected 值。所以当 locale.Locale == res.LocaleID 我想 show/hide 取决于 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 的东西 - 用户可以点击复选框，它会切换 hide/show table 列。

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

Answer 1

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

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。

Answer 2

您不必在 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>

工作的 Plunker：http://plnkr.co/edit/Al4KdHlCV2uo9HQ2qNt7?p=preview

AngularJS - 如何 show/hide table 复选框选择列 - 从嵌套 ng-repeat 生成

AngularJS - How to show/hide table column on checkbox selection - Generated from nested ng-repeat

javascript

angularjs-ng-repeat

ng-show