<!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表格效果的更多相关文章

  1. 【09】AngularJS 表格

    AngularJS 表格 ng-repeat 指令可以完美的显示表格. 在表格中显示数据 使用 angular 显示表格是非常简单的: <div ng-app="myApp" ...

  2. AngularJS表格神器“ui-grid”的应用

    HTML:  (代码仅用于解释得更清楚,并未完全展示) <!doctype html> <html ng-app="app"> <head> & ...

  3. AngularJS 表格

    ng-repeat 指令可以完美的显示表格. 使用 angular 显示表格是非常简单的: <!DOCTYPE html> <html> <head> <me ...

  4. angularjs购物车效果

    用angularjs写了一个购物车效果中. html代码: <div png-app="myAp" ng-controller="conTroll"> ...

  5. Angularjs 表格插件的使用

    对于相关的table组件可以使用:UI Grid (ng-grid),ng-table,smart table,Angular-Datatables,tablelite,kendo-ui中的grid. ...

  6. DIV+ul+LI实现表格效果以及div带滑动条

    写这个是为了给自己一个好好的笔记,以免下次需要的时候又到处找,费神费事费时费力.开始吧! 1.先看看效果 2.网页代码 <!DOCTYPE html PUBLIC "-//W3C//D ...

  7. angularjs表格方式显示数据

    <table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td&g ...

  8. AngularJS表格排序

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  9. AngularJS 表格(带有CSS样式)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

随机推荐

  1. 幂等性的含义和 HTTP请求方法的幂等性

    幂等性的含义和 HTTP请求方法的幂等性 1.什么是幂等性 =============== 幂等性,英文是idempotent,读作[aɪ'dɛmpətənt]. 它的含义如下: “Methods c ...

  2. django dynamic model

    django model 首先对于一个习惯用django model的骚年来说,你肯定对django model自定制用的很熟悉,但突然让你用django dynamic model,也许会有很多人懵 ...

  3. 深入剖析SolrCloud(三)

    作者:洞庭散人 出处:http://phinecos.cnblogs.com/ 本博客遵从Creative Commons Attribution 3.0 License,若用于非商业目的,您可以自由 ...

  4. POJ2187(凸包+旋转卡壳)

    这道题目的大意是给出一组二维空间的顶点,计算其中距离最远的两个顶点之间的距离. 先说明凸包的概念和求法. 定义:对于多边形P,若将P中任意的两个点(包含边上)用一条线段连接,线段都落于该多边形中(含边 ...

  5. codeforeces:Mister B and Astronomers分析和实现

    题目很长,稍微翻译一下: 外星球每隔T秒中只有一秒可以被观测到,其它T-1秒无法被观测.n个天文学家(分别编号为1,...,n)轮流观测天空1秒,且第i+1个科学家在第i个天文学家后ai+1秒后才执行 ...

  6. wampserver无法打开http://127.0.0.1/

    如果你更换了端口号那么你就应该把相应的端口号也带上,比如localhost:8080(或127.0.0.1:8080)这样应该就可以了,因为只有80端口是默认才不用输入的.

  7. 张超超OC基础回顾03_结构体类型作为成员变量的特殊用法

    直接上例子: 要求: 合理的设计一个”学生“类 学生有* 姓名* 生日两个属性和说出自己姓名生日方法  要求利用设计的学生类创建学生对象,并说出自己的姓名和年龄 描述学生类 事物名称: 学生(Stud ...

  8. Apache htpasswd命令

    一.简介 htpasswd是apache的一个工具,该工具主要用于建立和更新存储用户名.密码的文本文件,主要用于对基于http用户的认证. 二.语法 Usage: htpasswd [-cimBdps ...

  9. Smarty3——复合变量修饰器输

    你可以联合使用多个修饰器. 它们会按复合的顺序来作用于变量,从左到右. 它们必须以| (竖线)进行分隔,以‘:’号设置参数 {$articleTitle} {$articleTitle|upper|s ...

  10. Django Rest Framework框架 ---- url控制器

    Django Rest Framework框架 ---- url控制器