<! DOCTYPE html>
<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);
}
}
}
Delete all
$scope. dete= function () {
$scope. data = null;
}
$scope. Col = ' name ';//Sort by Name column by default
$scope. Gen = "";
$scope. desc = 0;//Default sort criteria Ascending
$scope. data = [{
Name:1,
Gender: ' OPPO ',
Age:26,
Score: ' Delete '
}, {
NAME:20,
Age:24,
Score: ' Delete '
}, {
Name:13,
Gender: ' Millet ',
AGE:20,
Score: ' Delete '
}, {
Name:4,
Gender: ' IPhone ',
Age:22,
Score: ' Delete '
}];
});
</script>
<body ng-app= "MyApp" ng-controller= "Myctrl" >
<input type= "text" placeholder= "Product name" ng-model= "Gen"/>
<input type= "button" value= "Delete all" ng-click= "dete ()"/>
<table border= "1px" cellspacing= "0px" >
<tr>
<th ng-click= "col= ' name ';d esc=!desc" > Product number </th>
<th ng-click= "col= ' gender ';d esc=!desc" > Product name </th>
<th ng-click= "col= ' age ';d esc=!desc" > Product price </th>
<th> Delete </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 angular sorting, deleting, and blurring the contents of a table
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
