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 e.g. '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.

Vivz · Accepted Answer · 2017-09-13 10:19:18Z

1

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

answered Sep 13, 2017 at 10:19

Vivz

6,6282 gold badges19 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vivz Over a year ago

No But the $index of resource.Resources will be in parallel with $index of view.resourceGridResources.Locales?

dhilt · Accepted Answer · 2017-10-05 14:43:21Z

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.

edited Oct 5, 2017 at 14:43

answered Sep 13, 2017 at 9:40

dhilt

21.1k8 gold badges79 silver badges96 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related