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 ...
随机推荐
- Spring整合Junit4进行单元测试
一. 添加依赖包(maven) <dependency> <groupId>junit</groupId> <artifactId>junit</ ...
- libevent源码深度剖析九
libevent源码深度剖析九 ——集成定时器事件 张亮 现在再来详细分析libevent中I/O事件和Timer事件的集成,与Signal相比,Timer事件的集成会直观和简单很多.Libevent ...
- php扩展开发1--添加函数
目标:便携php扩展 要求实现 输出hello word 首先用的是php7.0.3 centos7.1或者centos6.+ 1.1 RPM安装PHP rpm -Uvh https://mirr ...
- jmap, jhat命令
jmap命令有下面几种常用的用法 jmap [pid] jmap -histo:live [pid] >a.log jmap -dump:live,format=b,file=xxx.xxx [ ...
- 459. Repeated Substring Pattern 判断数组是否由重复单元构成
［抄题］: Given a non-empty string check if it can be constructed by taking a substring of it and append ...
- mybatis 框架 的应用之四(一对一 与 一对多)
lf-driver=com.mysql.jdbc.Driver lf-url=jdbc:mysql://localhost:3306/test?allowMultiQueries=true&u ...
- solr第二天 京东案例 课程文档 有用
全文检索技术 Lucene&Solr Part3 1. 课程计划 1. Solr配置中文分析器 a) Schema.xml的配置 b) 配置IKAnalyzer ...
- ubuntu 16.04 ARM glog移植
1. 下载源文件https://github.com/google/glog 2. 源文件有CMakeLists.txt, 直接使用toolchain.cmake 直接编译就可以了,详情参考我的随笔 ...
- Palindromeness CodeChef - PALPROB
传送门 分析 有中文题面所以就不写题目大意了 我们先建出回文树 然后根据fail信息建出一棵树 从根向下dfs,中间记录每一个len出现在哪个节点即可 代码 #include<iostream& ...
- Django ——Timezone 处理
Django ——Timezone 处理 https://blog.csdn.net/qq_37049781/article/details/79347278 2018年02月22日 14:50:24 ...