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 ...
随机推荐
- omitTermFreqAndPositions设置，词频FQ在打分中默认为1
compressed=true|false,是否使用gzip压缩(只有TextField和StrField可以压缩) compressThreshold=压缩阀值 multiValued=true|f ...
- 在页面完成读取EXCEL
protected void btnUpload_Click(object sender, EventArgs e) { if (Page.IsValid) { string sFILENAME = ...
- cocos+kbe问题记录
1.不要使用setTimeout函数 setTimeout函数,setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 是HTML DOM中的方法,在游戏中使用,属于全局的延时,当游 ...
- cocos2d-x 在vs2010下的搭建（win7系统）
1从官网下载cocos2d-x2.1.3的源码地址如下: http://cocos2d-x.org/ 2.解压下载的软件包我们会发现红框中vs2010的项目文件双击打开它 3.打开后我们要生成一些wi ...
- 特征选择Boruta
A good feature subset is one that: contains features highly correlated with (predictive of) the clas ...
- Django框架 之 MTV模型、 基本命令、简单配置
浏览目录 MTV模型 Django框架前奏 Django基础必备三件套 Djaogo基本命令 MTV模型 Django的MTV分别代表: Model(模型):负责业务对象与数据库的对象(ORM) Te ...
- 在VS2008和VS2010中禁用Visual Assist X
此方法对于VS2008和VS2010 都适用. 在VS2008或VS2010菜单栏中选择“VassistX”选项卡,找到“Enable/Disable Visual Assist X”选项, 点击即可 ...
- 解析json的方法
解析json的两种方法:JS中的eval().JSON.parse eval不仅解析内容还会解析其中的方法,JSON.parse解析更安全.JSONLint可校验json的错误.
- 设计模式05： Prototype 原型模式（创建型模式）
Prototype 原型模式(创建型模式) 依赖关系的倒置抽象不应该依赖于实现细节,细节应该依赖于抽象.对所有的设计模式都是这样的. -抽象A直接依赖于实现细节b -抽象A依赖于抽象B,实现细节b依赖 ...
- mxnet 线性模型
mxnet 线性模型 li {list-style-type:decimal;}ol.wiz-list-level2 > li {list-style-type:lower-latin;}ol. ...