How to hide columns in table using angularjs

Manideepgoud
Posted by Manideepgoud under AngularJS category on | Points: 40 | Views : 1316
In the below code we are going to see how to hide two columns in a table, we have used some jquery toggle function to hide the columns, we are hiding the Country and Age columns by clicking on column name.
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>Sample Application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
th,a {
background-color:green;
color:white;
}
</style>
<script>
$(document).ready(function () {
$(".col1").click(function () {
$(".col2").toggle(100);
});
});
</script>
</head>
<body ng-controller="ctrl">
<p style="color:blue;font-style:italic;">Hide and display the column</p>
<div class="col-xs-4">
<table class="table table-Hover table-bordered" border="1">
<thead>
<tr>
<th class="col1"><a>Name</a></th>
<th class="col2"><a>Country</a></th>
<th class="col2"><a>Age</a></th>
<th><a>Course</a></th>
<th><a>Office</a></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in collection">
<td>{{record.name}}</td>
<td class="col2">{{record.country}}</td>
<td class="col2">{{record.age}}</td>
<td>{{record.course}}</td>
<td>{{record.office}}</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var myapp = angular.module('myapp', []);
myapp.controller('ctrl', function ($scope) {
$scope.collection = [
{ name: 'Jani', country: 'Norway', age: '21', course: 'Java', office: 'HCL' },
{ name: 'Ram', country: 'India', age: '22', course: '.Net', office: 'Oracle' },
{ name: 'Raghu', country: 'USA', age: '23', course: 'Pega', office: 'Capgemini' },
{ name: 'Raj', country: 'England', age: '24', course: 'Testing', office: 'TechMahindra' },
{ name: 'Sai', country: 'India', age: '25', course: 'Hadoop', office: 'Infosys' }
];
});
</script>
</body>
</html>

Comments or Responses

Login to post response