angular排序的实例代码-js教程-PHP中文网

首页

web前端

js教程

angular排序的实例代码

零下一度

Jun 28, 2017 am 10:00 AM

angular 排序

说点小案例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?1.1.11" 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排序的实例代码的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

Java教程

1657

CakePHP 教程

1415

Laravel 教程

1309

PHP教程

1257

C# 教程

1230

显示更多

Related knowledge

如何在Windows 11/10中按拍摄日期对照片进行排序 Feb 19, 2024 pm 08:45 PM

本文将介绍如何在Windows11/10中根据拍摄日期对图片进行排序，同时探讨如果Windows未按日期排序图片应该如何处理。在Windows系统中，合理整理照片对于方便查找图像文件至关重要。用户可以根据不同的排序方式（如日期、大小和名称）来管理包含照片的文件夹。此外，还可以根据需要设置升序或降序排列，以便更灵活地组织文件。如何在Windows11/10中按拍摄日期对照片进行排序要按在Windows中拍摄的日期对照片进行排序，请执行以下步骤：打开图片、桌面或放置照片的任何文件夹在功能区菜单中，单

如何在Outlook中按发件人、主题、日期、类别、大小对电子邮件进行排序 Feb 19, 2024 am 10:48 AM

Outlook提供了许多设置和功能，可帮助您更有效地管理工作。其中之一是排序选项，可让您根据需要对电子邮件进行分类。在这个教程中，我们将学习如何利用Outlook的排序功能，根据发件人、主题、日期、类别或大小等条件对电子邮件进行整理。这将让您更轻松地处理和查找重要信息，提高工作效率。MicrosoftOutlook是一个功能强大的应用程序，可以方便地集中管理您的电子邮件和日历安排。您可以轻松地发送、接收和组织电子邮件，而内置的日历功能也让您能够方便地跟踪您即将面临的活动和约会。如何在Outloo

PHP开发：如何实现表格数据排序和分页功能 Sep 20, 2023 am 11:28 AM

PHP开发：如何实现表格数据排序和分页功能在进行Web开发中，处理大量数据是一项常见的任务。对于需要展示大量数据的表格，通常需要实现数据排序和分页功能，以提供良好的用户体验和优化系统性能。本文将介绍如何使用PHP实现表格数据的排序和分页功能，并给出具体的代码示例。排序功能实现在表格中实现排序功能，可以让用户根据不同的字段进行升序或降序排序。以下是一个实现表格

使用Python实现XML数据的筛选和排序 Aug 07, 2023 pm 04:17 PM

使用Python实现XML数据的筛选和排序引言：XML是一种常用的数据交换格式，它以标签和属性的形式存储数据。在处理XML数据时，我们经常需要对数据进行筛选和排序。Python提供了许多有用的工具和库来处理XML数据，本文将介绍如何使用Python实现XML数据的筛选和排序。读取XML文件在开始之前，我们需要先读取XML文件。Python有许多XML处理库，

如何在Ubuntu 24.04上安装Angular Mar 23, 2024 pm 12:20 PM

Angular.js是一种可自由访问的JavaScript平台，用于创建动态应用程序。它允许您通过扩展HTML的语法作为模板语言，以快速、清晰地表示应用程序的各个方面。Angular.js提供了一系列工具，可帮助您编写、更新和测试代码。此外，它还提供了许多功能，如路由和表单管理。本指南将讨论在Ubuntu24上安装Angular的方法。首先，您需要安装Node.js。Node.js是一个基于ChromeV8引擎的JavaScript运行环境，可让您在服务器端运行JavaScript代码。要在Ub

C++程序：按字母顺序重新排列单词的位置 Sep 01, 2023 pm 11:37 PM

在这个问题中，一个字符串被作为输入，我们必须按字典顺序对字符串中出现的单词进行排序。为此，我们为字符串中的每个单词（之间用空格区分）分配一个从1开始的索引，并以排序索引的形式获得输出。String={“Hello”,“World”}“Hello”=1“World”=2由于输入字符串中的单词已按字典顺序排列，因此输出将打印为“12”。让我们看看一些输入/结果场景-假设输入字符串中的所有单词都相同，让我们看看结果-Input:{“hello”,“hello”,“hello”}Result:3获得的结

Java中的Arrays.sort()方法如何按照自定义比较器对数组进行排序？ Nov 18, 2023 am 11:36 AM

Java中的Arrays.sort()方法如何按照自定义比较器对数组进行排序？在Java中，Arrays.sort()方法是一个非常有用的方法，可以对数组进行排序。默认情况下，该方法会按照升序排序。但是有时候，我们需要按照自己定义的规则对数组进行排序。这时，就需要用到自定义比较器（Comparator）。自定义比较器是一个实现了Comparator接口的类，

使用Angular和Node进行基于令牌的身份验证 Sep 01, 2023 pm 02:01 PM

身份验证是任何Web应用程序中最重要的部分之一。本教程讨论基于令牌的身份验证系统以及它们与传统登录系统的区别。在本教程结束时，您将看到一个用Angular和Node.js编写的完整工作演示。传统身份验证系统在继续基于令牌的身份验证系统之前，让我们先看一下传统的身份验证系统。用户在登录表单中提供用户名和密码，然后点击登录。发出请求后，通过查询数据库在后端验证用户。如果请求有效，则使用从数据库中获取的用户信息创建会话，然后在响应头中返回会话信息，以便将会话ID存储在浏览器中。提供用于访问应用程序中受

See all articles

angular排序的实例代码

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题