<!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 使用序号的表格的更多相关文章

  1. AngularJS显示一个简单表格

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  2. AngularJS的ng-repeat显示表格

    代码下载:https://files.cnblogs.com/files/xiandedanteng/angualrJSngRepeatTable.rar 代码: <!DOCTYPE HTML ...

  3. AngularJS:实例

    ylbtech-AngularJS:实例 1.返回顶部 1. AngularJS 实例 实例 您可以在线编辑实例,然后点击按钮查看结果. AngularJS 实例 <div ng-app=&qu ...

  4. WPS 表格筛选两列相同数据

    选出B列中的数据是否在A列中出现:用countif 函数,在 B列右侧插入一列,C1输入 = countif 区域中选择 B列的内容区域(选择后加 按F4),条件选择B列所在的内容区域(选择后按F4) ...

  5. FineUIMvc随笔(6)对比WebForms和MVC中表格的数据库分页

    声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 通过对比WebForms和MVC中表格数据库分页代码的不同,可以对 MVC 中的数据流转有更加深入的了解. WebForms 中 ...

  6. AngularJS的相关应用

    一.[AngularJS常用指令]        1.ng-app:声明Angular所管辖的区域.一般写在body或html上,原则上一个页面只有一个:           <body ng- ...

  7. FineUIMvc表格数据库分页,使用CYQ.Data组件

    首先看下前台 View 的定义: @(F.Grid() .EnableCheckBoxSelect(true) .Width(850) .ShowHeader(true) .ShowBorder(tr ...

  8. WPS 表格筛选两列相同数据-完美-2017年11月1日更新

    应用: 1.选出A列中的数据是否在B列中出现过: 2.筛选出某一批序号在一个表格里面的位置(整批找出) 3.其实还有其他很多应用,难描述出来... ... A列中有几百的名字,本人想帅选出B列中的名字 ...

  9. andorid 表格布局

    tablelayout.xml表格布局 <?xml version="1.0" encoding="utf-8"?> <TableLayout ...

随机推荐

  1. matlab中如何根据t检验参数查找t检验值

    这个问题花了一些时间.先看图 这个是t检验里面的公式,但是如何在matlab中找到该式子对应的值,我现在才知道. 就是这样:x=tinv(1-α/2,n-1)----t(n)分布的上侧α分位数     ...

  2. 生成ks.cfg文件

    RHEL 7下生成ks.cfg文件 环境 + RHEL 7 + 字符界面, 没有安装图形界面 软件包安装 + `yum install system-config-kickstart -y` + `y ...

  3. iis6、iis7、apache设置mime类型

    1.IIS6添加方法. 打开iis,展开网站,右键要设置的站点--属性.找到“http头”选项卡--mime类型 进行设置添加. 截图以.ipa mime类型举例. 2.IIS7(iis7.5.iis ...

  4. 一个C#后台调用接口的例子

    string url = ConfigurationSettings.AppSettings["resurl"].ToString(); var wc = new WebClien ...

  5. 实现JFileChooser的多种文件类型限制(设置过滤器)

    使用时直接调用方法. // 多类型时使用 public void FileFilter(JFileChooser F) { String[][] fileNames = { { ".java ...

  6. django细节

    1.处理请求 1.1  /add/?a=4&b=5 这样GET方法进行[获取参数] from django.shortcuts import render from django.http i ...

  7. Redis的Publish/Subscribe

    Publish/Subscribe 从字面上理解就是发布(Publish)与订阅(Subscribe),在Redis中,你可以设定对某一个key值进行消息发布及消息订阅,当一个key值上进行了消息发布 ...

  8. git 创建远程版本库(亲测有效)

    一.github远程版本库 1.创建SSH Key(windows)   ssh-keygen -t rsa -C "youremail@example.com"   2.连接版本 ...

  9. 关于React的生命周期的解释

    ---恢复内容开始--- ---恢复内容结束---

  10. 菜鸟学习Spring——SpringMVC注解版将URL中的参数转成实体

    一.概述 将URL中参数转成实体在我们项目中用的很多比如界面提交表单请求后台的Contorller的时候通过URL传递了一串参数到后台,后台通过Spring让界面的字段与实体的字段映射来实现给后台的实 ...