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 ...

随机推荐

【转】教你如何实现linux和W…
原文地址:[转]教你如何实现linux和Windows之间的文件共享,samba的安装与配置作者:铅笔小蜡本人在虚拟机下装fedora13,已经实现. 1. 首先检查os是否安装好了samba. [ ...
Python基础—流程控制
一.Python流程控制计算机程序在解决某个具体问题时,包括三种情形,即顺序执行所有的语句.选择执行部分的语句和循环执行部分语句,这正好对应着程序设计中的三种程序执行结构流程:顺序结构.选择结构和循 ...
关于SO_LINGER选项的使用
结论: linux开启SO_LINGER时,如果设置l_linger为非0, 不管是阻塞socket,非阻塞socket, 在这里都会发生阻塞, 而并不是UNP所讲到的( 非阻塞socket会立即返回 ...
c语言实践打印三角形
效果如下: 我是怎么考虑这个问题的. 首先共有5行,那么我们需要一个循环,让这个循环走5遍. 那么我们有个大概的代码结构 for(int i=0;i<5;i++) { } i的定义域是[0,4] ...
pip镜像源配置
#配置文件路径:%HOME%\pip\pip.ini,不存在新建即可 #在 Windows 2000 以上版本里,%HOME% 目录指的是系统盘下的“\Documents and Settings\你 ...
js实现选项卡切换
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
linux 的各个文件夹都是干什么用
http://www.ruanyifeng.com/blog/2012/02/a_history_of_unix_directory_structure.html http://www.pathnam ...
第01章-Spring之旅
一.简化Java开发 1. Spring的主要特性依赖注入DI和面向切面编程AOP. 2. 关键策略轻量级和最小侵入性编程:POJO 松耦合:DI和AOP 声明式编程:切面和惯例减少样板式代码: ...
(转)C# HTML解析示例---星星引发的血案
原文地址:http://www.cnblogs.com/wurang/archive/2013/06/14/3119023.html [前言] 从CSDN转投cnBlog也有一段时间了,发现cnBlo ...
Oracle 写存储过程的一个模板还有一些基本的知识点
我很少用Oracle,也算新手,不过其实入手没有那么难,下面只是一个基本知识,高手绕道,其实数据库基本是相同的,这里提供都是基本知识点有一个Oracle溢出的问题,容易让新手怀疑到无所怀疑,其实就是 ...

angularJs表格效果

angularJs表格效果的更多相关文章

随机推荐

热门专题