Angular.js排序查詢功能的實現(xiàn)

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 20:05:13

Angular.js排序查詢功能的實現(xiàn)

Angular.js排序查詢功能的實現(xiàn):本文主要介紹了Angularjs添加排序查詢功能的實例代碼,需要的朋友可以參考下，希望能幫助到大家。廢話不多說了，直接給大家貼代碼了，具體代碼如下所示： <!DOCTYPE html> <html> <head lang="en"> &l

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀Angular.js排序查詢功能的實現(xiàn):本文主要介紹了Angularjs添加排序查詢功能的實例代碼,需要的朋友可以參考下，希望能幫助到大家。廢話不多說了，直接給大家貼代碼了，具體代碼如下所示： <!DOCTYPE html> <html> <head lang="en"> &l

本文主要介紹了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=[];//存放添加的內(nèi)容
 $scope.xz=function(){//新增球員的點擊事件點擊列表出現(xiàn)
 $scope.h=true;
 }
 $scope.tj = function(){
 for(var i=0;i<$scope.persons.length;i++){//遍歷列表的所有數(shù)據(jù)
 if($scope.name==$scope.persons[i].name) {//對比數(shù)據(jù)沒有重復(fù)的姓名出現(xiàn)
 alert("您記錄的內(nèi)容已存在");
 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;//添加成功添加表格關(guān)閉
 }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">
<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="">票數(shù)正序</option>
 <option value="-">票數(shù)倒序</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>票數(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>

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Angular.js排序查詢功能的實現(xiàn)

推薦度：

點擊下載本文 文檔為doc格式

標(biāo)簽：功能實現(xiàn) 排序

熱門焦點

Angular.js排序查詢功能的實現(xiàn)

Angular.js排序查詢功能的實現(xiàn)

Angular.js排序查詢功能的實現(xiàn)

最新推薦

猜你喜歡

熱門推薦