TWaver HTML5 se lanzó hace algún tiempo y la cantidad de clientes que lo usan está aumentando gradualmente.
Así que no podía esperar para solicitar una versión de prueba para escribir una pequeña página web,
Recientemente, estoy escribiendo consultas de datos y funciones de visualización de tablas. Los componentes de la tabla se proporcionan en HTML5,
Consulte la demostración proporcionada por TWaver, todavía hay muchas tablas en uso,
Así que me referí a una de las demostraciones, creé una nueva tabla y asigné valores a la tabla.
Pronto se generará un formulario.
¡El siguiente es un caso, solo como referencia!
<!DOCTYPE html >
< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< title > Ejercicio en la segunda semana </ title >
//paquete js guiado < script src= "angular. js" ></ script > < script > var app = angular . module ( "myApp" ,[]);
app . controller ( "miCtrl" ,
function ($alcance) {
$alcance. cpzong = [
{ id : 80 ,
nombre : "iphone" ,
dinero : 5400
},
{ id : 1200 ,
nombre : "ipad mini" ,
dinero : 2200
},
{ id : 500 ,
nombre : "ipad air" ,
dinero : 2340
},
{ id : 29 ,
nombre : "ipad" ,
dinero : 1420
},
{ id : 910 ,
nombre : "imac" ,
dinero : 15400
}
];
$alcance. ordenarBandera = "-" ;
$alcance. ordenarNombre = "nombre" ;
//
Definir la función de clasificación
$scope.sortProducts= function (clomnName) {
$ scope.sortName = clomnName;
if ($scope.sortFlag == " -" ) {
$ scope.sortFlag = "" ;
} else {
$ scope.sortFlag = " -" ;
}
} // Eliminar el producto especificado
$scope. deleteProduct = function (name) {
for (
índice en $scope. cpzong ){
if ($alcance. cpzong [ índice ]. nombre == nombre){
$alcance. cpzong . empalme ( índice , 1 );
}
}
} //全部删除
$alcance. deleteAll = function () {
$alcance. cpzong = nulo ;
}
}); </ guión > </
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="goodsen cpzong | filtrar :buscar | orderBy :( sortFlag + sortName )" >
< td > {
{
bienes .id}} </ td > < td > {
{
bienes .nombre}} </ td > < td > {
{
bienes . dinero }} </ td > < td >< a ng-click= " deleteProduct (
goods.name)">删除</a></td>
</tr>
</table>
</center>
</body>
</html>
完毕