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 联合查询,厉害的并集 重复项只显示一个 两个查询结果并在一起后排序
镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...
随机推荐
- Nginx+Keepalived配置
1. Nginx安装 (1) 环境:分别在2台服务器上部署nginx且步骤一致: 如192.138.86.1和192.138.86.2 (2) 下载官网最新稳定版,地址:https://nginx.o ...
- Composite Design Pattern in Java--转
https://dzone.com/articles/composite-design-pattern-in-java-1 The composite pattern is meant to &quo ...
- IE7不兼容slideDown()
IE7下,使用slideDown()方法,可能出现以下两种问题: 一.下拉动画变形,最终定格时正常 二.下拉动画正常,最终定格时消失
- 简单shell实现
http://blog.csdn.net/lishuhuakai/article/details/11928055 #include <stdio.h> #include <unis ...
- Google Kickstart在线测试规则以及注意事项
谷歌招聘在如火如荼的进行中,进谷歌都需要经过谷歌kickstart在线测试,然后过了之后还有五轮的面试- -.好吧毕竟你待遇高,你强你有理.. 下面介绍一下进谷歌的第一关google kickstar ...
- ubuntu 14.04 64bit 安装 oracle 11g r2
参考文章:http://tutorialforlinux.com/2016/03/09/how-to-install-oracle-11g-r2-database-on-ubuntu-14-04-tr ...
- Spring @Resource, @Autowired and @Inject 注入
Overview I’ve been asked several times to explain the difference between injecting Spring beans with ...
- 用C#实现工资计算公式动态编写
1,工资计算公式 每一个企业都一定会用到工资计算,发工资是一件非常神圣的事情,而计算工资就是一项非常重要的工作.Excel有非常强大的公式功能,帮助了很多财务人员计算工资,但如果企业的人数比较多,而且 ...
- AngularJs整合ui-bootstrap以及ui-grid
1. ui-bootstrap 参考博客: http://www.cnblogs.com/pilixiami/p/5597634.html (这篇博客写的非常不错,值得推荐) angular-ui ...
- Android学习——Fragment与Activity通信(一)
学会了在Activity中加载Fragment的方法之后,接下来便需要学习Activity和Fragment之间的通信.这一节先学习如何把Activity中的信息传递给Fragment. 基本过程 在 ...