Home > Article > Web Front-end > Implementation of Angular.js sorting query function
Implementation of Angular.js sorting query function
- 小云云Original
- 2018-01-20 17:17:431189browse
This article mainly introduces the example code of adding sorting query function in Angularjs. Friends who need it can refer to it. I hope it can help everyone.
Without further ado, I will post the code directly for you. The specific code is as follows:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="angular-1.3.0.js"></script>
<script type="text/javascript" src="jquery.1.12.4.js"></script>
<script>
var app=angular.module("myapp",[]);
app.controller("myCtrl",function($scope){
$scope.h=false;//显示和隐藏添加列表
$scope.persons=[];//存放添加的内容
$scope.xz=function(){//新增球员的点击事件点击列表出现
$scope.h=true;
}
$scope.tj = function(){
for(var i=0;i<$scope.persons.length;i++){//遍历列表的所有数据
if($scope.name==$scope.persons[i].name) {//对比数据没有重复的姓名出现
alert("您记录的内容已存在");
return;
}
}
//判断不能为空
if($scope.name!=""&&$scope.name!=null){
if($scope.wz!=""&&$scope.wz!=null){
if($scope.hao!=""&&$scope.hao!=null){
if($scope.number!=""&&$scope.number!=null){
$scope.persons.push({//添加
name:$scope.name,
wz:$scope.wz,
hao:$scope.hao,
number:$scope.number});
$scope.name="";
$scope.wz="";
$scope.hao="";
$scope.number="";
$scope.h=false;//添加成功添加表格关闭
}else{
alert("票數不能為空");
}
}else{
alert("球号不能为空");
}
}else{
alert("位置不能为空");
}
}else{
alert("姓名不能为空");
}
}
});
</script>
<!--//css样式-->
<style>
.input{
width: 300px;
height: 30px;
}
.select{
width: 300px;
height: 35px;
}
.button{
background-color: deepskyblue;
width: 100px;
height: 60px;
border-radius: 5%;
margin-top: 30px;
}
.table{
margin-top: 30px;
}
.table tr:nth-child(even){
background-color: #eeeeee;
}
.table2{
position: absolute;
left: 300px;
top: 650px;
}
.q{
text-align: center;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<p>
查询<br>
<input type="text" class="input" ng-model="names">
</p>
<!--//排序-->
<p style="position: absolute;top: 10px;left: 500px">
排序<br>
<select class="select" ng-model="b">
<option value="">票数正序</option>
<option value="-">票数倒序</option>
</select>
</p>
<!--新增球员按钮-->
<button class="button" ng-click="xz()">新增球员</button>
<table border="1" width="60%" cellspacing="0" cellpadding="10" class="table">
<tr style="background-color: #999">
<th>姓名</th>
<th>位置</th>
<th>球号</th>
<th>票数</th>
</tr>
<!--展示界面-->
<tr ng-repeat="person in persons | filter:{'name':names} | orderBy:b+'number'">
<td class="q">{{person.name}}</td>
<td class="q">{{person.wz}}</td>
<td class="q">{{person.hao}}</td>
<td class="q">{{person.number}}</td>
</tr>
</table>
<!--添加的表单-->
<table border="1" cellspacing="0" cellpadding="10" class="table2" ng-show="h">
<tr>
<td>姓名</td>
<td><input type="text" placeholder="请输入姓名" ng-model="name"></td>
</tr>
<tr>
<td>位置</td>
<td><input type="text" placeholder="请输入位置" ng-model="wz"></td>
</tr>
<tr>
<td>球号</td>
<td><input type="text" placeholder="请输入球号" ng-model="hao"></td>
</tr>
<tr>
<td>票数</td>
<td><input type="text" placeholder="请输入票数" ng-model="number"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" value="提交" ng-click="tj()"></td>
</tr>
</table>
</body>
</html>
Related recommendations:
MySQL recursive sorting Query + tree node generation
mysql database, custom sorting query
mysql multi-condition sorting query. . . .
The above is the detailed content of Implementation of Angular.js sorting query function. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn