CODEWITHSUNDEEP
angularjs
vishnu
vishnu

Reputation: 4599

Hiding the table columns and rows using AngularJs

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.

Upvotes: 1

Views: 6859

Answers (2)

micronyks
micronyks

Reputation: 55443

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

Upvotes: 1

DonJuwe
DonJuwe

Reputation: 4563

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.

Upvotes: 0

Related Questions