HTML angular对表格内容进行排序,删除,模糊查找
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{border: 1px solid deepskyblue;}
</style>
<script type="text/javascript" src="angular.js" ></script>
<script>
var app = angular.module('myapp', []);
app.controller('myctrl', function($scope) {
$scope.nc=function(name){
// $scope.data.splice(name,1);
for(index in $scope.data){
if($scope.data[index].name == name){
//i = index;
$scope.data.splice(index,1);
}
}
}
//全部删除
$scope.dete= function(){
$scope.data = null;
}
$scope.col = 'name';//默认按name列排序
$scope.gen = "";
$scope.desc = 0;//默认排序条件升序
$scope.data = [{
name: 1,
gender: 'OPPO',
age: 26,
score: '删除'
}, {
name: 20,
gender: '华为',
age: 24,
score: '删除'
}, {
name: 13,
gender: '小米',
age: 20,
score: '删除'
}, {
name: 4,
gender: 'iPhone',
age: 22,
score: '删除'
}];
});
</script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<input type="text" placeholder="产品名称" ng-model="gen"/>
<input type="button" value="全部删除" ng-click="dete()"/>
<table border="1px" cellspacing="0px">
<tr>
<th ng-click="col='name';desc=!desc">产品编号</th>
<th ng-click="col='gender';desc=!desc">产品名称</th>
<th ng-click="col='age';desc=!desc">产品价格</th>
<th>删除</th>
</tr>
<tr ng-repeat="d in data| filter:{gender:gen} |orderBy:col:desc">
<td ng-bind="d.name"></td>
<td ng-bind="d.gender"></td>
<td ng-bind="d.age"></td>
<td ng-bind="d.score" ng-click="nc(d.name)"></td>
</tr>
</table>
</body>
</html>
