小编给大家分享一下angularjs如何添加排序查询功能，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！具体代码如下所示： <!DOCTYPE html> &
小编给大家分享一下angularjs如何添加排序查询功能，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
具体代码如下所示：
<!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">
<div>
查询<br>
<input type="text" class="input" ng-model="names">
</div>
<!--//排序-->
<div >
排序<br>
<select class="select" ng-model="b">
<option value="">票数正序</option>
<option value="-">票数倒序</option>
</select>
</div>
<!--新增球员按钮-->
<button class="button" ng-click="xz()">新增球员</button>
<table border="1" width="60%" cellspacing="0" cellpadding="10" class="table">
<tr >
<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>看完了这篇文章，相信你对“Angularjs如何添加排序查询功能”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网html频道，感谢各位的阅读！
--结束END--
本文标题: Angularjs如何添加排序查询功能
本文链接: https://www.lsjlt.com/news/72428.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0