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" />
<style>
table td {
border:solid 1px grey;
border-collapse:collapse;
padding:10px;
}
table tr:nth-child(odd) {
background-color:#f1f1f1;
}
table tr:nth-child(even) {
background-color:#ffffff;
}
</style>
</head>
<body>
<div class="container"style="padding:50px">
<div data-ng-app="myApp"data-ng-controller="myCtrl">
<table>
<tr data-ng-repeat="x in names | orderBy:'liaohao'">
<td>{{$index+1}}</td><td>{{x.liaohao|uppercase}}</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>
AngularJS 使用序号的表格的更多相关文章
- AngularJS显示一个简单表格
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- AngularJS的ng-repeat显示表格
代码下载:https://files.cnblogs.com/files/xiandedanteng/angualrJSngRepeatTable.rar 代码: <!DOCTYPE HTML ...
- AngularJS：实例
ylbtech-AngularJS:实例 1.返回顶部 1. AngularJS 实例 实例 您可以在线编辑实例,然后点击按钮查看结果. AngularJS 实例 <div ng-app=&qu ...
- WPS 表格筛选两列相同数据
选出B列中的数据是否在A列中出现:用countif 函数,在 B列右侧插入一列,C1输入 = countif 区域中选择 B列的内容区域(选择后加 按F4),条件选择B列所在的内容区域(选择后按F4) ...
- FineUIMvc随笔（6）对比WebForms和MVC中表格的数据库分页
声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 通过对比WebForms和MVC中表格数据库分页代码的不同,可以对 MVC 中的数据流转有更加深入的了解. WebForms 中 ...
- AngularJS的相关应用
一.[AngularJS常用指令] 1.ng-app:声明Angular所管辖的区域.一般写在body或html上,原则上一个页面只有一个: <body ng- ...
- FineUIMvc表格数据库分页，使用CYQ.Data组件
首先看下前台 View 的定义: @(F.Grid() .EnableCheckBoxSelect(true) .Width(850) .ShowHeader(true) .ShowBorder(tr ...
- WPS 表格筛选两列相同数据-完美-2017年11月1日更新
应用: 1.选出A列中的数据是否在B列中出现过: 2.筛选出某一批序号在一个表格里面的位置(整批找出) 3.其实还有其他很多应用,难描述出来... ... A列中有几百的名字,本人想帅选出B列中的名字 ...
- andorid 表格布局
tablelayout.xml表格布局 <?xml version="1.0" encoding="utf-8"?> <TableLayout ...
随机推荐
- ubuntu中mysql5.7表名区分大小写解决方案
在/etc/mysql/mysql.conf.d/mysqld.cnf 添加lower_case_table_names=1
- Redis 的Hashs（哈希表）数据类型
在Memcached中,我们经常将一些结构化的信息打包成hashmap,在客户端序列化后存储为一个字符串的值,比如用户的昵称.年龄.性别.积分等,这时候在需要修改其中某一项时,通常需要将所有值取出反序 ...
- Java ConcurrentHashMap的小测试
今天正式开始自己的分布式学习,在第一章介绍多线程工作模式时,作者抛出了一段关于ConcurrentHashMap代码让我很是疑惑,代码如下: public class TestClass { priv ...
- MySQL中在原表中做数据去重（按日期去重，保留id最小的记录）
表名称 code600300 delete from code600300 where id not in (select minid from (select min(id) as minid fr ...
- Cocos2d-js 开发记录-初始
GameDev标签很早就建了,现在终于可以往里面添加第一篇文章了. 最近和朋友在做几个小游戏,就是微信社交中的那些有点2的游戏,我自己也觉得有点傻,不过先从小的做起,平时想想挺简单的事情,一旦自己真做 ...
- TCP/IP五层模型详解
将应用层,表示层,会话层并作应用层,从tcp/ip五层协议的角度来阐述每层的由来与功能,搞清楚了每层的主要协议就理解了整个互联网通信的原理. 首先,用户感知到的只是最上面一层应用层,自上而下每层都依赖 ...
- [转]chrome developer tool 调试技巧
这篇文章是根据目前 chrome 稳定版(19.0.1084.52 m)写的, 因为 google 也在不断完善chrome developer tool, 所以 chrome 版本不同可能稍有差别. ...
- iDempiere 开发指南 Process(iDem后台进程)及插件的开发及部署
Created by 蓝色布鲁斯,QQ32876341,blog http://www.cnblogs.com/zzyan/ iDempiere官方中文wiki主页 http://wiki.idemp ...
- 【Linux】小应用 大智慧
小应用 大智慧--重视 以工程师的标准要求自己
- spring mvc&mybatis搭配使用心得
请求参数不多时控制器方法使用@RequestParam或@PathVariable接收参数即可. 请求参数过多时使用@RequestParam指定一个map接受参数即可,mybatis查询时可以直接作 ...