说点小案例angular的排序

<!DOCTYPE html>

<html ng-app="mk">

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

			*{

				margin: 0px;

				padding: 0px;

			}

			nav{

				text-align: center;

			}

			nav>*{

				vertical-align: top;

			}

			table{

				width: 100%;

				text-align: center;

			}

			table th,td{

				background: #A9A9A9;

				line-height: 30px;

			}

		</style>

	</head>

	<body>

		<div ng-controller="text">

			<nav>

				<select ng-model="a"> <!-- 这也是表单也有数据，她可以获取value值，这几个值代表你循环进来的每项key名 -->

					<option value="num">按编号排序</option>

					<option value="name">按姓名排序</option>

					<option value="age">按年龄排序</option>

				</select>

				<select ng-model="b">  <!-- 也同样获取value值，当为负的时候，是倒序，正序 -->

					<option value="">升序</option>

					<option value="-">降序</option>

				</select>

				<input type="text" ng-model="s"/>

			</nav>

			<table border="0px" id="table">

				<tr>

					<th>编号</th>

					<th>姓名</th>

					<th>年龄</th>

				</tr>

				<tr ng-repeat="value in data | orderBy:b+a | filter:s"> <!-- 过滤器过滤以下数据 b+a这样就字符串拼接到了一起。这样数据改变就进行了排序 -->

					<td>{{value.num}}</td>

					<td>{{value.name}}</td>

					<td>{{value.age}}</td>

				</tr>

			</table>

		</div>

		<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">

			var app=angular.module("mk",[]);

			app.controller("text",function($scope,$http){

				$http.get("paixu.json").success(function(data){

					$scope.data=data.xinxi

					$scope.a="num";

				})

			});

		</script>

	</body>

</html>

　　

angular排序的更多相关文章

  1. 【Angular】排序

    Correct way to integrate Jquery plugins in Angular.js gaurav123337/AngularOtherJqueryPluginDemo 超强的拖 ...

  2. 如何angular过滤器进行排序？？？

    首先定义一个json文件: 然后写HTML文件: <div id="box"> <!--第一个下拉框--> <select ng-model=&quo ...

  3. angular入门--列表排序

    首先,先上代码 <html ng-app="app1"> <head> <meta charset='utf-8' /> <meta na ...

  4. angular 过滤排序

    <table class="table"> <thead> <tr> <th ng-click="changeOrder('id ...

  5. 数组中包含多个对象 按照对象中的时间进行排序 适用与Angular.js、Jquery、微信小程序等

         LiveList.sort(this.compare('StartDate'))   //StartData:需要排序的时间   compare: function (property) { ...

  6. 前端MVC学习总结（一）——MVC概要与angular概要、模板与数据绑定

    一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...

  7. angular的$filter服务

    首先,介绍下$filter服务: 1.$filter是用来进行数据格式化的专用服务: 2.AngularJS内置了currency.date.filter.json.limitTo.lowercase ...

  8. Asp.Net MVC 分页、检索、排序整体实现

    很多时候需要这样的功能,对表格进行分页.排序和检索.这个有很多实现的方式,有现成的表格控件.用前端的mvvm,用户控件.但很多时候看着很漂亮的东西你想进一步控制的时候却不那么如意.这里自己实现一次,功 ...

  9. (翻译)Angular.js为什么如此火呢？

    在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...

随机推荐

  1. Linux Shell编程、变量、控制语句

    为什么要学习Shell编程 1)Linux运维工程师在进行服务器集群管理时,需要编写Shell程序来进行服务器管理. 2)对于JavaEE和Python程序员来说,工作的需要,你的老大会要求你编写一些 ...

  2. ReactNative常用组件库 victory-native 图表

    victory-native 是不错的图表组件,支持很多种图表 地址: https://github.com/FormidableLabs/victory-native 先安装 react-nativ ...

  3. easyui实现多选框,并且获取值

    在easyui官方文档里面是没有combobox下拉框,可以进行多选的,但是其实是可以多选的, <td align="left">大区:   <input typ ...

  4. 【算法笔记】A1047 Student List for Course

    https://pintia.cn/problem-sets/994805342720868352/problems/994805433955368960 题意 给出每个学生的选课情况,输出每节课选课 ...

  5. 论文分享NO.1（by_xiaojian）

    论文分享第一期-2019.03.14: 1. Non-local Neural Networks  2018 CVPR的论文 2. Self-Attention Generative Adversar ...

  6. C#常用总结《一》

    集合类常用: List<T> 泛型集合 Dictionary<key,value>  字典集合 文件读取: FileStream :对各种文件读写,字节处理更好 StreamR ...

  7. Mac下配置Java Web开发环境（Mac 10.12）

    1.JDK http://www.cnblogs.com/EasonJim/p/6277541.html 2.MySQL http://www.cnblogs.com/EasonJim/p/62758 ...

  8. JWT的介绍解析

    JWT的介绍解析 一.什么是JWT?了解JWT,认知JWT 首先jwt其实是三个英语单词JSON Web Token的缩写.通过全名你可能就有一个基本的认知了.token一般都是用来认证的,比如我们系 ...

  9. PHP 中 strlen 获取中英 字符长度 以作以后对比使用

    ANSII编码: 1 长度是3 a 长度是3 ? 长度是3 我 长度是4 ?长度是2 ---------------------------- UTF-8编码: 1 长度是1 a长度是1 ? 长度是1 ...

  10. 2-9 js基础 cookie封装

    // JavaScript Document 'use strict'; function setCookie(sName,sValue,iDay){ if(iDay){ var oDate = ne ...