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

Question

I have created a Plunker with my code showing the issue here :

As you can see when you click on the eg 'de' checkbox it toggles show/hide of the table headings - but not the <textarea> values under the column heading, corresponding to the locale ('de' in this case), which is what I am currently trying to get working.

I cant think of a way to link the <textarea> depending on locale.Selected value of the checkbox. So when locale.Locale == res.LocaleID I want to show/hide depending on the locale.Selected value.

<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>

Trying to implment something like here - whereby user can click on the check box and it will toggle hide/show table column.

Please note: my demo plunker is just example of issue in my much larger project so I have no control over changing the json format etc.

Answer 1

Add this method to your controller:

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

Add this condition to your view:

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

A working demo: http://plnkr.co/edit/neQtu8qxQQVP2kDIY5ru?p=preview .

Answer 2

You don't have to write any function in JS. Since the number of items in resource.Resources is same as the number of items in 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>

Working Plunker : http://plnkr.co/edit/Al4KdHlCV2uo9HQ2qNt7?p=preview