TWaver HTML5 has been released for some time, and the number of customers using it is gradually increasing.
So I couldn't wait to apply for a trial version to write a small web page,
Recently, I am writing data query and table display functions. Table components are provided in HTML5,
Check out the Demo provided by TWaver, there are still a lot of tables used,
So I referred to one of the demos, created a new table, and assigned values to the table.
Soon a form will be generated.
The following is a case, for reference only!!!
<!DOCTYPE html >
< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< title > Exercise in the second week </ title >
//guided js package < script src= "angular. js" ></ script > < script > var app = angular . module ( "myApp" ,[]);
app . controller ( "myCtrl",
function ($scope) {
$scope.cpzong = [
{
id:80,
name:"iphone",
money:5400
},
{
id:1200,
name:"ipad mini",
money:2200
},
{
id:500,
name:"ipad air",
money:2340
},
{
id:29,
name:"ipad",
money:1420
},
{
id:910,
name:"imac",
money:15400
}
];
$scope.sortFlag = "-";
$scope.sortName = "name";
//Define sorting function
$scope.sortProducts= function (clomnName) {
$ scope.sortName = clomnName;
if ($scope.sortFlag == " -" ) {
$ scope.sortFlag = "" ;
} else {
$ scope.sortFlag = " -" ;
}
} // Delete the specified product
$scope. deleteProduct = function (name) {
for (
index in $scope.cpzong){
if($scope.cpzong[index].name == name){
$scope.cpzong.splice(index,1);
}
}
}
//全部删除
$scope.deleteAll = function () {
$scope.cpzong = null;
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<input type="text" ng-model="serach" placeholder="产品名称" />
<button ng-click="deleteAll()">删除全部</button><br/><br/>
<table id="tab" border="1px" cellpadding="10px" cellspacing="0px">
<tr>
<th ng-click="sortProducts('id')">产品编号</th>
<th ng-click="sortProducts('name')">产品名称</th>
<th ng-click="sortProducts('money')">产品价格</th>
<th>功能</th>
</tr>
<tr ng-repeat="goods in cpzong | filter:serach | orderBy:(sortFlag+sortName)">
<td>{
{
goods.id}}</td>
<td>{
{
goods.name}}</td>
<td>{
{
goods.money}}</td>
<td><a ng-click="deleteProduct(goods.name)">删除</a></td>
</tr>
</table>
</center>
</body>
</html>
完毕