<!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. java tcp socket实例

    java tcp socket实例 2011-04-20 13:58 2364人阅读 评论(1) 收藏 举报 socketjavatcpthreadserverclass package com.ne ...

  2. solrserver实例化

    以下是httpClient实例化方式,需要tomcat运行Solr服务 1.ConcurrentUpdateSolrServer实例化SolrServer,该类实例化多用于更新删除索引操作 Concu ...

  3. 【总结整理】OpenLayers项目分析,OpenLayers中的图层,GeoServer发布wms服务--实验(转)

    https://blog.csdn.net/u013751758/article/details/44751315 https://blog.csdn.net/u013751758/article/d ...

  4. css四可见,部分可见和重叠半透明

    <html> <head> <title>javascript</title> <style type="text/css"& ...

  5. 安装MySQLdb for Python3.7

    Python连接mysql数据库通过MySQLdb模块,在此记录我安装MySQLdb的过程. 一.系统环境 操作系统:Win7 64位 Python:Python 3.7 二.安装说明 A.如果Pyt ...

  6. c# 下实现ping 命令操作

    1>通过.net提供的类实现 using System; using System.Collections.Generic; using System.Linq; using System.Te ...

  7. Hyperledger Fabric Transaction Proposal过程

    客户端将交易预提案(Transaction Proposal)通过 gRPC 发送给支持 Endorser 角色的 Peer 进行背书. 这些交易提案可能包括链码的安装.实例化.升级.调用.查询:以及 ...

  8. python gridsearchcv 里的评价准则

    http://scikit-learn.org/stable/modules/model_evaluation.html 3.3.1. The scoring parameter: defining ...

  9. keys()

    keys():返回一个数组,里面是符合匹配模式的键列表 $redis = new Redis(); $redis->connect('127.0.0.1', 6379); $pattern = ...

  10. SQLite在php中的接口

    sqlite是一种比较轻型的嵌入式数据库,它与 SQL 之间的不同,为什么需要它,以及它的应用程序数据库处理方式.SQLite是一个软件库,实现了自给自足的.无服务器的.零配置的.事务性的 SQL 数 ...