Angularjs 如何在单击V形符号时从右向左更改glypicon V形符号
这里我有一个带有glypicon V形右符号的表，当我单击该符号时，它不会变为右侧和左侧。有人能帮我吗？这里我有一个带有glypicon V形右符号的表，当我单击该符号时，它不会变为右侧和左侧。有人能帮我吗Angularjs 如何在单击V形符号时从右向左更改glypicon V形符号,angularjs,twitter-bootstrap,Angularjs,Twitter Bootstrap,这里我有一个带有glypicon V形右符号的表，当我单击该符号时，它不会变为右侧和左侧。有人能帮我吗？这里我有一个带有glypicon V形右符号的表，当我单击该符号时，它不会变为右侧和左侧。有人能帮我吗 <!DOCTYPE html> <html ng-app="myapp"> <head> <title>Sample Application</title> <meta charset="utf-8">
<!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);
});
});
$("#openClose").click(function () {
$(this).toggleClass('glyphicon-chevron-left glyphicon-chevron-right');
});
</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>
示例应用程序
th，a{
背景颜色：绿色；
颜色：白色；
}
$（文档）.ready（函数（）{
$（“.col1”）。单击（函数（）{
$（“.col2”）.toggle（100）；
});
});
$（“#openClose”）。单击（函数（）{
$（this.toggleClass（'glyphicon-chevron-left-glyphicon-chevron-right'）；
});
隐藏并显示列
名称
国家
年龄
课程
办公室
{{record.name}
{{record.country}
{{record.age}
{{record.course}
{{record.office}
var myapp=angular.module（'myapp'，[]）；
myapp.controller（'ctrl'，函数（$scope）{
$scope.collection=[
{姓名：'Jani'，国家：'Norway'，年龄：'21'，课程：'Java'，办公室：'HCL'}，
{姓名：'Ram'，国家：'India'，年龄：'22'，课程：'.Net'，办公室：'Oracle'}，
{姓名：'Raghu'，国家：'USA'，年龄：'23'，课程：'Pega'，办公室：'Capgemini'}，
{姓名：'Raj'，国家：'England'，年龄：'24'，课程：'Testing'，办公室：'TechMahindra'}，
{姓名：'Sai'，国家：'India'，年龄：'25'，课程：'Hadoop'，办公室：'Infosys'}
];
});