Hiding the table columns and rows using AngularJs

Question

I have checkboxes with table headers, i want to hide the table columns and rows based on the checkbox click,

<ul>
    <li ng-repeat="opt in fieldvalues"><input type="checkbox" ng-model="checked" value="{{opt}}" />{{opt}}</li>
 </ul>

<table>
    <tr>                                
      <th ng-show="checked=='true'">Activity ID</a></th>
      <th>Activity Description</th>
    </tr>
<tr ng-repeat="nm in makerQueueData">
  <td ng-show="checked=='true'">{{nm.formattedIdentifier}}</td>
  <td>{{nm.description}}</td>
</tr>
</table>

I tried but no luck.

Why do you have several checkboxes, all bound to 'checked'? That doesn't make much sense. — JB Nizet
– JB Nizet, Commented Jan 23, 2015 at 7:01
Am I right that you want to have a checkbox for each item in fieldvalues and each item has its own table? — DonJuwe
– DonJuwe, Commented Jan 23, 2015 at 7:53

micronyks · Accepted Answer · 2015-01-23 08:12:25Z

1

<ul>
<li ng-repeat="opt in fieldvalues"><input type="checkbox" ng-model="checked" value="{{opt}}" />{{opt}}</li>
</ul>




  <table>
         <tr>                                
         <th ng-show="checked"><a>Activity ID</a></th>   

         //here checked gets bool value itself based on selection. you don't need to compare it to string 'true'.

         //keep in mind i assume {{checked}} returns only bool value
         <th>Activity Description</th>
        </tr>


        <tr ng-repeat="nm in makerQueueData">
          <td ng-show="checked">{{nm.formattedIdentifier}}</td>
          <td>{{nm.description}}</td>
        </tr>
        </table>

Working fiddle for your : http://jsfiddle.net/b69pkeLd/1/ Let me know if any issue occurs.

edited Jan 23, 2015 at 8:12

answered Jan 23, 2015 at 7:53

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

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

Comments

DonJuwe · Accepted Answer · 2015-01-23 08:07:45Z

I hope this is what you are looking for:

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.fieldvalues = [
        {text: 'Test1', checked: false}, 
        {text: 'Test2', checked: false}
    ];
    $scope.makerQueueData = [
        'Whatever your', 'data is'
    ];
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl">
    <div ng-repeat="opt in fieldvalues">
        <input type="checkbox" id="checkbox-{{$index}}" ng-model="opt.checked" value="{{opt.text}}" />
        <label for="checkbox-{{$index}}">{{opt.text}}</label>
        <table ng-show="opt.checked">
            <tr>                                
                <th>Activity ID</a></th>
                <th>Activity Description</th>
            </tr>
            <tr ng-repeat="nm in makerQueueData">
                <td ng-show="opt.checked'">{{$index}}</td>
                <td>{{nm}}</td>
            </tr>
        </table>
    </div>
</div>

Moreover, use <label> for type="checkbox" description. This makes the label clickable.

Collectives™ on Stack Overflow

Hiding the table columns and rows using AngularJs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related