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 联合查询,厉害的并集 重复项只显示一个 两个查询结果并在一起后排序
镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...
随机推荐
- flex buider 4.6 打开设计模式(designer)时提示内存不足错误的解决办法
先申明,此方法只适用于flex builder 4.6及以下版本, flex builder 4.7以后已经完全取消了designer功能,是没有办法补救的. 1. 首先下载APE文件,这个文件好像是 ...
- centos 6.5搭建LNMP环境
1:查看环境: 1 2 [root@10-4-14-168 html]# cat /etc/redhat-release CentOS release 6.5 (Final) 2:关掉防火墙 1 [r ...
- C++程序设计基础(8)main函数
注:读<程序员面试笔记>笔记总结 1.知识点 (2)main函数的形式 //first type int main() //second type int main(int argc,ch ...
- [转]ASP.NET MVC实现POST方式的Redirect
本文转自:http://www.cnblogs.com/ryuasuka/p/3604452.html?utm_source=tuicool 我们知道,在ASP.NET MVC中,要从一个Action ...
- C# url获取图片流转字符串
//http url获取图片流转字符串 //string url = serverUrl.TrimEnd('/') + PUrl; //WebRequest request = WebRequest. ...
- git本地分支关联远程分支
问题描述: 从远程master克隆下来以后, 在本地创建wf_dev分支, 此时执行git pull 操作出现图中问题. 这是因为:本地的wf_dev分支还没有和远程的wf_dev进行关联. 执行: ...
- Java ConcurrentHashMap的小测试
今天正式开始自己的分布式学习,在第一章介绍多线程工作模式时,作者抛出了一段关于ConcurrentHashMap代码让我很是疑惑,代码如下: public class TestClass { priv ...
- sublime Error executing: /usr/bin/security dump-trust-settings -d
sublime text2突然crash,无法简单粗暴的关闭,就开始认真解决这个问题. 问题: 参考文献:https://github.com/wbond/package_control/issues ...
- Shader Example
//测试viewDir对顶点的影响Shader "Example/TestViewDir" { Properties{ _RimColor("Rim Color" ...
- C语言指针的陷阱
C语言指针的陷阱 分类: C/Cpp 转自:http://blog.csdn.net/porscheyin/article/details/3461670 “C语言诡异离奇,陷阱重重,却获得了巨大 ...