TWaver HTML5发布已有一段时间，使用的客户也是逐渐增加，
于是我也迫不及待地申请了一个试用版来写一个小网页，
最近正在写到数据查询，表格显示的功能。表格组件在HTML5中是提供的，
查看TWaver提供的Demo,表格的使用还是比较多的，
于是参考了其中的一个Demo，新建一个表格，并给表格赋值。
很快一张表格就生成了。
以下为案例,仅供参考!!!
我要评论
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第二周练习title>
//导的js包
<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";
//定义排序功能
$scope.sortProducts = function (clomnName) {
$scope.sortName = clomnName;
if ($scope.sortFlag == "-"){
$scope.sortFlag = "";
}else{
$scope.sortFlag = "-";
}
}
//删除指定商品
$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>
完毕
如对本文有疑问， 点击进行留言回复！！
网友评论