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 ...
随机推荐
- 最小的VIM操作指南
最小VIM操作指南 vim的操作命令非常多,为了能开始工作,必须学会一个最小的vim操作集合,这里做个总结. 1.插入.追加.插入新行 i:在当前光标所在字符的前面插入,当前字符及其后面的字符后撤 a ...
- Docker学习笔记_下载镜像更换为国内源，实现快速下载image
1.编辑/etc/docker/daemon.json,增加下面内容: { "registry-mirrors": ["https://registry.docker-c ...
- React官方网站学习
React官方网站 英文版 https://reactjs.org/tutorial/tutorial.html React官方网站 中文版 https://react.docschina.org ...
- wpf控件开发基础
wpf控件开发基础(3) -属性系统(2) http://www.cnblogs.com/Clingingboy/archive/2010/02/01/1661370.html 这个有必要看看 wpf ...
- MongoDB整理笔记の增加节点
MongoDB Replica Sets 不仅提供高可用性的解决方案,它也同时提供负载均衡的解决方案,增减Replica Sets 节点在实际应用中非常普遍,例如当应用的读压力暴增时,3 台节点的环境 ...
- Eclipse平台下配置Go语言开发环境（Win7）
<Go语言编程>中写到:“从功能和易用性等方面考虑, Eclipse+GoEclipse.LiteIDE这两个环境在所有IDE里面是表现最好的”,所以笔者打算采用Eclipse+GoEcl ...
- arcconf工具操作手册V1.0
arcconf工具操作手册 1.1.1 arcconf工具初始化和去初始化硬盘 [命令功能] PMC阵列卡系统下初始化硬盘,可以将raw盘状态变成ready状态,以便进一步组建raid和设置热备盘: ...
- 安装两个XAMPP或者更新XAMPP时, PHP版本还是旧版本的问题
转载自 : http://blog.csdn.net/everything1209/article/details/53466725 原文 : 问题:我电脑有原先有一个wamp,但是PHP版本为5.5 ...
- "ServiceStack.Redis.RedisNativeClient”的方法“get_Db”没有实现。
解决办法: 1.首先通过nuget程序包管理器将相关依赖项卸载干净 2.检查各项目模块中的package.config里还有没有redis的节点,如果已经存在就删除掉 3.去别的正常的项目中看一下re ...
- I-team 博客全文检索 Elasticsearch 实战
一直觉得博客缺点东西,最近还是发现了,当博客慢慢多起来的时候想要找一篇之前写的博客很是麻烦,于是作为后端开发的楼主觉得自己动手丰衣足食,也就有了这次博客全文检索功能Elasticsearch实战,这里 ...