AngularJS显示一个简单表格
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible"content="IE=edge" />
<meta name="viewport"content="width=device-width,initial-scale=1" />
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet"href="bootstrap-3.3.6-dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container"style="padding:50px">
<div data-ng-app="myApp"data-ng-controller="myCtrl">
<table class="table table-striped">
<tr data-ng-repeat="x in names">
<td>{{x.liaohao}}</td><td>{{x.xinghao}}</td>
</tr>
</table>
</div>
</div>
<script src="jQuery/jquery-2.1.4.min.js"></script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
angular.module("myApp", []).controller("myCtrl", function ($scope, $http) { $http.get("json/json.json").success(function (response) { $scope.names=response.records}) })
</script>
</body>
</html>
json.json
{
"records": [
{
"liaohao": "03020001",
"xinghao": "FR100-4T-2.2BDRV1"
},
{
"liaohao": "03020002",
"xinghao": "FR100-4T-2.2BDRV2"
},
{
"liaohao": "03020003",
"xinghao": "FR100-4T-2.2BDRV3"
},
{
"liaohao": "03020004",
"xinghao": "FR100-4T-2.2BDRV4"
},
{
"liaohao": "03020005",
"xinghao": "FR100-4T-2.2BDRV5"
},
{
"liaohao": "03020006",
"xinghao": "FR100-4T-2.2BDRV6"
},
{
"liaohao": "03020007",
"xinghao": "FR100-4T-2.2BDRV7"
}
]
}
AngularJS显示一个简单表格的更多相关文章
- PyCharm Django 显示一个简单页面
1.创建项目及创建应用 如:创建一个名zqxt_tmpl的项目,创建一个 learn的应用 在(Terminal)中执行 django-admin.py startproject zqxt_tmpl ...
- Ruby学习笔记2 : 一个简单的Ruby网站,搭建ruby环境
Ruby on Rails website 的基础是 请求-返回 循环. 首先是浏览器请求服务器, 第二步,Second, in our Rails application, the route ta ...
- cal - 显示一个日历
总览 cal [-mjy ] [月份 [年份 ] ] 描述 Cal 显示一个简单的日历.. 如果没有指定参数, 则显示当前月份. 选项如下所列: -m 显示星期一作为一周的第一天.. (缺省为星期日. ...
- 实现一个竖直的显示表头的表格(vue版本)
今天遇到一个问题,实现这样一个竖直的显示表头的表格,如下图.默认显示两列. vue实现代码如下: tableComponent.vue: <template> <table ...
- 如何用latex画一个简单的表格
latex毫无疑问是一个十分强大的论文写作工具,所以掌握它就显得非常有意义,讲一下如何画一个简单的表格,代码如下: \begin{table}\centering\begin{tabular}{||c ...
- 【UI插件】开发一个简单日历插件(上)
前言 最近开始整理我们的单页应用框架了,虽然可能比不上MVVM模式的开发效率,也可能没有Backbone框架模块清晰,但是好歹也是自己开发出来 而且也用于了这么多频道的东西,如果没有总结,没有整理,没 ...
- 使用React并做一个简单的to-do-list
1. 前言 说到React,我从一年之前就开始试着了解并且看了相关的入门教程,而且还买过一本<React:引领未来的用户界面开发框架 >拜读.React的轻量组件化的思想及其virtual ...
- 用Qt写软件系列三:一个简单的系统工具(上)
导言 继上篇<用Qt写软件系列二:QIECookieViewer>之后,有一段时间没有更新博客了.这次要写的是一个简单的系统工具,需求来自一个内部项目.功能其实很简单,就是查看当前当前系统 ...
- SqlSever基础 union 联合查询,厉害的并集 重复项只显示一个 两个查询结果并在一起后排序
镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...
随机推荐
- 18 Command Line Tools to Monitor Linux Performance
By Ravi Saive Under: Linux Commands, Monitoring Tools On: December 26, 2013 http://www.tecmint.com/c ...
- c# 远程连接共享文件
c# 远程连接共享文件 /// <summary> /// 连接远程共享文件夹 /// </summary> /// <param name="path&quo ...
- SpringMVC:系统认识一下maven
网上看了很多springMVC helloworld的教程,非常不满意:首先,maven构建的就很少,再者,绝大部分都是断章取义,让人不明就里.其中有几篇讲的好的,我摘录了一些,自己试着构建了一下项目 ...
- TortoiseSVN安装
安装说明 开发人员强烈建议使用IDE中的SVN插件更加智能与人性化. 首先安装SVN客户端,windows一般选择乌龟客户端https://tortoisesvn.net/downloads.html ...
- Thrift笔记(三)--Thrift框架通信源码分析
Thrift 客户端调用RPC的Demo public static void main(String[] args) throws Exception { TTransport transport ...
- 纯CSS的三角符号
项目中经常用到三角形,现在给大家讲下用纯CSS写的下三角实心图形 .triangle{ border-width: 5px 4px 0 4px; border-color: #454A7B trans ...
- css之margin,padding的百分比
注意:上下内边距与左右内边距一致:即上下内边距的百分数会相对于父元素宽度设置,而不是相对于高度. PS:而且是基于父元素内容的宽度(width属性的大小),不是基于父元素整个框架的宽度
- jQuery Ajax(异步改同步)
在实际使用中,我们经常会用的Ajax(异步加载,在不刷新整个网页的前提下对网页部分内容进行更新) 使用时,偶尔会遇上需要从一个接口中得到一个数组和数据对应的id,在另一个接口上再得到数据,最初写法如下 ...
- 靠谱的div引入任何外链内容
靠谱的div引入任何外链内容 开发中经常要在div中引入一个页面,该页面可能是内部页面,可能是一个外部页面,也可能只是一个域名获取的请求. 对于内部页面的加载,建议使用jquery的load函数,如: ...
- 【网络编程】Socket套接字网络编程模型
一.Linux网络模型 -- Socket套接字编程 图片:Socket 抽象层 Socket编程--不同协议,统一接口 Socket的实质就是一个接口, 利用该接口,用户在使用不同的网络协议时,操作 ...