zoukankan      html  css  js  c++  java
  • 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{
    				 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>
    

      

  • 相关阅读:
    链表实现
    @Aspect
    mybatis plus
    using
    50道题
    梦想,青春,时间
    存储过程!!!
    事务,视图,索引
    高级查询--嵌套和相关,两套分页!!!
    学习笔记
  • 原文地址:https://www.cnblogs.com/durenlong/p/7087542.html
Copyright © 2011-2022 走看看