How to change chevron symbol right and left while clicking symbol [Resolved]

Posted by Nagamohan under AngularJS on 3/16/2017 | Points: 10 | Views : 272 | Status : [Member] | Replies : 2
In the below code , i have glyphicon symbol, but it is not working, it should change left and right
<!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>





Responses

Posted by: A2H on: 3/16/2017 [Member] [MVP] Silver | Points: 50

Up
0
Down

Resolved
You have already attached a click event for column, so the next event wont fire. To fix the issue move the toggle code to first click event

   $(document).ready(function () {
$(".col1").click(function () {
$(".col2").toggle(100);
$(this).toggleClass('glyphicon-chevron-left glyphicon-chevron-right');
});
});


Complete Code
<!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);
$(this).toggleClass('glyphicon-chevron-left glyphicon-chevron-right');
});
});


// $("#openClose").click(function () {
/// $(this).toggleClass('glyphicon-chevron-left');
// });


</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><a>Name<span id="openClose" class="col1 glyphicon glyphicon-chevron-right"></span></a></th>
<th class="col2" ng-hide="hided"><a>Country</a></th>
<th class="col2" ng-hide="hided"><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>


Thanks,
A2H
My Blog

Nagamohan, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: A2H on: 3/16/2017 [Member] [MVP] Silver | Points: 25

Up
0
Down
Sample Working Demo : http://jsbin.com/cohaneduku/edit?html,output

Thanks,
A2H
My Blog

Nagamohan, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response