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 ...
随机推荐
- Java多线程-线程的同步(同步方法)
线程的同步是保证多线程安全访问竞争资源的一种手段.线程的同步是Java多线程编程的难点,往往开发者搞不清楚什么是竞争资源.什么时候需要考虑同步,怎么同步等等问题,当然,这些问题没有很明确的答案,但有些 ...
- C程序栈内存堆内存的地址
#include <stdio.h> #include <malloc.h> int main() { char * p1, * p2; p1=(char *)malloc(2 ...
- Lucene Payload 的研究与应用
Payload (元数据) 诞生于 Lucene 的2.2 版本,它是在 Lucene 2.1 索引文件格式的基础上扩展而来,提供了一种可以灵活配置的高级索引技术,在某些特定应用场景下能优化基于 Lu ...
- Codeforces 1109E 线段树
思路及博客:https://www.cnblogs.com/uid001/p/10507346.html 代码: #include <bits/stdc++.h> #define LL l ...
- linux下scsi共享磁盘的简单搭建
linux下scsi共享磁盘的简单搭建 Scsi 共享磁盘需要我先有空余的分区,或者可以在虚拟机里面添加一块磁盘,安装所需的软件我在虚拟机里面添加了一块硬盘,分了一个主分区,sdb1 1G,将这个用s ...
- Django Rest Framework框架 ---- url控制器
Django Rest Framework框架 ---- url控制器
- DataTable 设置primarykey 后进行 Merge操作
1.先查看概念 可以看highplayer博客 http://blog.csdn.net/highplayer/article/details/6613817 2. protected void st ...
- ByteUnit
JDK里面有TimeUnit,看spark源码有个ByteUnit.这个类还是挺不错的. public enum ByteUnit { BYTE (1), KiB (1024L), MiB ((lon ...
- C#中的异步编程Async 和 Await
谈到C#中的异步编程,离不开Async和Await关键字 谈到异步编程,首先我们就要明白到底什么是异步编程. 平时我们的编程一般都是同步编程,所谓同步编程的意思,和我们平时说的同时做几件事情完全不同. ...
- Regist&Login
关于注册页面和登录页面的业务流程 form表单中确定action提交地址 method 确定提交的方法--->写出相对应的Servlet,假如接受的数据不多 ,那么用 String userna ...