angularJs表格效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.6.3/angular.min.js"></script>
<style>
table {
border-collapse: collapse;
} table,th, td{
border: 1px solid black;
} table
{
width:%;
}
th
{
height:100px;
} </style> </head>
<body> <div ng-app="myApp" ng-controller="customersCtrl"> <table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table> </div> <script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("/try/angularjs/data/Customers_JSON.php")
.then(function (result) {
$scope.names = result.data.records;
});
});
</script> </body>
</html>
样式调节学习：
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开
Width和height属性定义表格的宽度和高度。
下面的例子是设置100％的宽度，50像素的th元素的高度的表格：
text-align属性设置水平对齐方式，向左，右，或中心：
angularJs表格效果的更多相关文章
- 【09】AngularJS 表格
AngularJS 表格 ng-repeat 指令可以完美的显示表格. 在表格中显示数据 使用 angular 显示表格是非常简单的: <div ng-app="myApp" ...
- AngularJS表格神器“ui-grid”的应用
HTML: (代码仅用于解释得更清楚,并未完全展示) <!doctype html> <html ng-app="app"> <head> & ...
- AngularJS 表格
ng-repeat 指令可以完美的显示表格. 使用 angular 显示表格是非常简单的: <!DOCTYPE html> <html> <head> <me ...
- angularjs购物车效果
用angularjs写了一个购物车效果中. html代码: <div png-app="myAp" ng-controller="conTroll"> ...
- Angularjs 表格插件的使用
对于相关的table组件可以使用:UI Grid (ng-grid),ng-table,smart table,Angular-Datatables,tablelite,kendo-ui中的grid. ...
- DIV+ul+LI实现表格效果以及div带滑动条
写这个是为了给自己一个好好的笔记,以免下次需要的时候又到处找,费神费事费时费力.开始吧! 1.先看看效果 2.网页代码 <!DOCTYPE html PUBLIC "-//W3C//D ...
- angularjs表格方式显示数据
<table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td&g ...
- AngularJS表格排序
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- AngularJS 表格(带有CSS样式)
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
随机推荐
- 2009-2010网络最热的 嵌入式…
前段时间做了一个关于ARM9 2440资料的汇总帖,很高兴看到21ic和CSDN等论坛朋友们的支持和鼓励.当年学单片机的时候datasheet和学习资料基本都是在论坛上找到的,也遇到很多好心的高手朋友 ...
- oracle delete t1；drop table t1；drop table t1 purge
Truncate tableTruncate table t1;Ddl语言,自动提交:不能回退:回收范围::挪动高水位线:将所有的数据清除,保留表结构:将表缩的最小:保留表的约束和权限. Drop t ...
- Apache Hive 简介及安装
简介 Hive 是基于 Hadoop 的一个数据仓库工具,可以将结构化的数据文件 映射为一张数据库表,并提供类 SQL 查询功能. 本质是将 SQL 转换为 MapReduce 程序. 主要用途:用来 ...
- 最新Eclipse Photon安装tomcat
发现最新版的eclipse竟然没有tomcat配置项,可能是因为spring boot很火,所以server默认就不包含tomcat,需要手动安装组件, Version: Photon Releas ...
- Tensorflow训练结果测试
代码参考(https://blog.csdn.net/disiwei1012/article/details/79928679) import osimport sysimport randomimp ...
- 安装 SQL Server 2014 Express
安装 SQL Server 2014 Express 我的电脑系统: Windows 10 64位 一 . 下载 安装Microsoft SQL Server 2014 Express 软甲下载地址: ...
- python 添加日期
import pandas as pd applydata['apply_time'] = pd.to_datetime(applydata.apply_time)# applydata.apply_ ...
- UOJ#22. 【UR #1】外星人
传送门 分析 我们发现一个很神的性质,就是对于一个数如果放在它之前的数小于它那它一定对答案没有贡献 于是我们用dp[i][j]表示从大往小考虑了前i个数,当前答案是j的方案数 我们知道它由两种情况转移 ...
- [转]asp.net使用uploadify上传出现的IO Error问题
原文链接:http://blog.csdn.net/w3031213101/article/details/6335878 解决方法:1.uploadify控件的自定义size必须调整大小,即属性:s ...
- vue父子通信
首先在组件创建中创建子组件Todos.vue <template> <div class="hello"> <h1>todos show< ...