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 ...
随机推荐
- 【iptables】规则的试验和查看
1.存在桥接,查看桥接访客网络规则 ebtables -L 可以看到对不同的链的策略
- .NET Core 部署到CentOS–1.创建项目，简单部署
开发环境:Windows 10,部署环境:阿里云 CentOS 7.3 1. 创建应用 1) 创建项目, 配置应用生成部署包 2) 配置项目 编辑project.json, 追加环境项, 选项可参考这 ...
- Java 匿名内部类 & 内部类
一.JAVA中内部类和匿名内部类的区别 内部类:内部类可以是static的或者非static的,static内部类只能包含静态方法和静态类变量,只能访问外部类的静态元素,内部类可以实例化,多次使用. ...
- 数据分析核心包——pandas
一.pandas简介 pandas是一个强大的Python数据分析的工具包,是基于NumPy构建的. 1.pandas的主要功能 (1)具备对其功能的数据结构DataFrame.Series (2)集 ...
- 从零开始的全栈工程师——jQuery
jQueryjq是js一个高效且精简的库( 用的多写得少 ) ,是chrome出版的.jq内部有一个$的方法,他是jq的起始符或标识符,这个方法是用于获取元素. 下载库或者框架的方法官网 produc ...
- HttpComponents
一 概述 1.HttpComponents的作用 HttpComponents的作用是模拟浏览器获取网页内容. 二 使用 1.使用HttpComponents需要先导入架包. 2.使用 Closeab ...
- 关于li标签行内显示的问题
在我们实现导航栏的时候,经常要用到ul标签. 通常,我们是通过给li标签设置display:inline-block来使其在一行里显示,但是这个时候出现了一个很头疼的问题. 我们先上代码. <! ...
- 纯CSS实现Tab切换标签效果代码
在线演示地址如下: http://demo.jb51.net/js/2015/css-tab-bq-style-cha-codes/ <!DOCTYPE html PUBLIC "-/ ...
- 19_AOP概述
[AOP的使用场景] 性能测试 访问控制 事务管理 日志记录 [AOP相关术语] [ 连接点 Joinpoint ] 程序执行的某个特定位置.(假如Car类有drive()方法,那么在drive()方 ...
- cordova 开发 android app 简要流程
1. 安装cordova:npm install -g cordova --registry=https://registry.npm.taobao.org 2. 创建cordova工程:进入工作目录 ...