溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下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(){//新增球員的點擊事件點擊列表出現(xiàn)
$scope.h=true;
}
$scope.tj = function(){
for(var i=0;i<$scope.persons.length;i++){//遍歷列表的所有數(shù)據
if($scope.name==$scope.persons[i].name) {//對比數(shù)據沒有重復的姓名出現(xiàn)
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("票數(shù)不能為空");
}
}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="">票數(shù)正序</option>
<option value="-">票數(shù)倒序</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>票數(shù)</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>票數(shù)</td>
<td><input type="text" placeholder="請輸入票數(shù)" ng-model="number"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" value="提交" ng-click="tj()"></td>
</tr>
</table>
</body>
</html>看完了這篇文章，相信你對“Angularjs如何添加排序查詢功能”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業(yè)資訊頻道，感謝各位的閱讀！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
