如何通过点击按钮上的角度js隐藏和显示表格的td？ [英] How to hide and show the td of a table through angular js on button click?
本文介绍了如何通过点击按钮上的角度js隐藏和显示表格的td？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< html >
< script src = http： //ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js\"> < / script >
< style >
body { font-family ： Arial; }
table {
border-collapse ： collapse;
}
td {
border < span class =code-keyword>： 1px solid black;
padding ： 5px;
}
th {
border ： 1px纯黑;
padding ： 5px;
text-align ： < span class =code-keyword> left;
。 arrow-上 {
width ： 0;
< span class =code-attribute> height ： 0;
< span class =code-attribute> border-left ： 5px solid transparent;
border-right ： 5px solid transparent;
border-bottom ： 10px纯黑色;
显示 ： inline-block;
}
。 arrow-down {
width ： 0;
height ： 0;
border-left ： 5px solid transparent;
border-right ： 5px solid transparent;
border-top ： 10px solid黑色;
显示 ： 内联块;
}
}
< / style >
< script >
var myApp = angular
.module（ myModule ，[]）
.controller（ myController，函数（$ scope）{
var employee =
[
{name： Channel1}，
{name： Channel2}，
{name： Channel3}，
{name： Channel4}，
{name： Channel5}，
{name： Channel6}，
{name： Channel7}，
{name： Channel8}，
]
$ scope.employee = employee;
// $ scope.rowLimit = 3;
// $ scope.sortColumn =name;
}）;
< / script >
< 正文 ng-app = myModule >
< div >
< ; b > < h1 > 排序数据< / h1 > < < span class = code-leadattribute> / b >
< / div >
< div ng-controller < span class =code-keyword> = myController >
< table >
< thead >
< tr >
< > 所有频道< / th >
< / tr >
< / thead >
< tbody >
< tr ng-repeat = < span class =code-keyword>员工中的empl >
< td > {{ empl.name}} < / td >
< td > < 按钮 值 = 选择 > 选择< / button > ; < / td >
< / tr > ;
< / tbody >
< / table < span class =code-keyword>>
< / div >
< / body >
< / html >
我想要隐藏td单击并显示底部的td具有相同的值但按钮文本将取消选择。
我尝试过：
我尝试过与div相同但在表格
解决方案
<时无法做同样的事情blockquote> scope）{
var employee =
[
{name： Channel1}，
{name： Channel2}，
{name： Channel3}，
{name： Channel4} ，
{name： Channel5}，
{name： Channel6}，
{name： Channel7}，
{name： Channel8}，
]
scope.employee = employee;
//
scope.rowLimit = 3;
//
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
body{font-family:Arial;}
table{
border-collapse:collapse;
}
td{
border:1px solid black;
padding:5px;
}
th{
border:1px solid black;
padding:5px;
text-align:left;
.arrow-up{
width:0;
height:0;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-bottom:10px solid black;
display:inline-block;
}
.arrow-down{
width:0;
height:0;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:10px solid black;
display:inline-block;
}
}
</style>
<script>
var myApp=angular
.module("myModule",[])
.controller("myController",function ($scope){
var employee=
[
{name:"Channel1"},
{name:"Channel2"},
{name:"Channel3"},
{name:"Channel4"},
{name:"Channel5"},
{name:"Channel6"},
{name:"Channel7"},
{name:"Channel8"},
]
$scope.employee=employee;
//$scope.rowLimit=3;
//$scope.sortColumn="name";
});
</script>
<body ng-app="myModule">
<div>
<b><h1>Sorting Data</h1></b>
</div>
<div ng-controller="myController">
<table>
<thead>
<tr>
<th>All Channels</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="empl in employee">
<td >{{empl.name}}</td>
<td><button value="Select">Select</button></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I want to hide the td which is clicked and show that td at the bottom with the same values but the button text will be unselect.
What I have tried:
I have tried the same with the div but not able to do the same in case of table
解决方案
scope){ var employee= [ {name:"Channel1"}, {name:"Channel2"}, {name:"Channel3"}, {name:"Channel4"}, {name:"Channel5"}, {name:"Channel6"}, {name:"Channel7"}, {name:"Channel8"}, ]
scope.employee=employee; //
scope.rowLimit=3; //
这篇关于如何通过点击按钮上的角度js隐藏和显示表格的td？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
