您好,登錄后才能下訂單哦!
注:添加球員的功能無(wú)指定技術(shù)要求,添加球員的頁(yè)面也無(wú)具體樣式要求。
1.實(shí)現(xiàn)上圖頁(yè)面所有元素,頁(yè)面布局規(guī)整,跟上圖效果一致
2.實(shí)現(xiàn)文案顯示,按效果顯示
3.實(shí)現(xiàn)查詢,實(shí)現(xiàn)查詢敏感詞過(guò)濾,實(shí)現(xiàn)查詢后列表變化
4.實(shí)現(xiàn)倒序,實(shí)現(xiàn)正序,下拉列表排序效果都實(shí)現(xiàn)
5.按鈕背景一致,按鈕樣式
6.實(shí)現(xiàn)添加球員頁(yè)面,添加球員頁(yè)面樣式,添加球員功能,添加球員必填項(xiàng)判斷,添加完球員后能顯示在表格內(nèi),已存在球員判重。
7.表格樣式跟上圖樣式一致
代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3:AngularJS:模糊查詢過(guò)濾內(nèi)容,下拉菜單排序,過(guò)濾敏感字符,驗(yàn)證判斷后添加表格信息</title> <style> *{ margin: auto; padding: 0; } body{ text-align: center; margin: 50px auto; } table { margin-top: 30px; } .btn { background: cornflowerblue; width: 100px; height: 50px; } tr:nth-child(2n){ background: #666; } </style> <script src="../angular-1.5.5/angular.js"></script> <script> //主模板 var myapp=angular.module("myapp",[]); //控制器 myapp.controller("myCtrl",function ($scope) { $scope.data=[ {name:"張三",wei:"控球后衛(wèi)",hao:"11",piao:"999"}, {name:"李四",wei:"大前鋒",hao:"21",piao:"888"}, {name:"王五",wei:"小前鋒",hao:"23",piao:"777"}, {name:"趙六",wei:"中鋒",hao:"10",piao:"666"}, {name:"周七",wei:"得分后衛(wèi)",hao:"1",piao:"555"}, ] $scope.name=""; $scope.search3=""; $scope.$watch("name",function (value) { if(value.indexOf("槍")!=-1) { alert("輸入內(nèi)容含有敏感字"); $scope.name=""; } else { $scope.search3=$scope.name; } }) $scope.order="-請(qǐng)選擇-"; //排序 $scope.pai=function () { if( $scope.order!="-請(qǐng)選擇-") { if( $scope.order=="票數(shù)正敘") { console.log("0"); return false; } else { return true; } } return false; } //添加球員 $scope.show=false; $scope.add=function () { $scope.show=true; } $scope.uname=""; $scope.uwei=""; $scope.uhao=""; $scope.upiao=""; $scope.adduser=function () { if( $scope.uname=="" || $scope.uwei=="" || $scope.uhao=="" || $scope.upiao=="") { alert("此項(xiàng)為必填項(xiàng)"); } else { for(var i=0;i<$scope.data.length;i++) { if($scope.data[i].name==$scope.uname) { alert("此球員已存在"); $scope.uname=""; $scope.uwei=""; $scope.uhao=""; $scope.upiao=""; break; } else if(i==$scope.data.length-1) { $scope.data.push({name:$scope.uname,wei:$scope.uwei,hao:$scope.uwei,piao:$scope.upiao}); $scope.uname=""; $scope.uwei=""; $scope.uhao=""; $scope.upiao=""; $scope.show=false; break; } } } } }) </script> </head> <body ng-app="myapp" ng-controller="myCtrl">
查詢:<input type="text" ng-model="name">
排序:
<select ng-model="order"> <option>-請(qǐng)選擇-</option> <option>票數(shù)倒敘</option> <option>票數(shù)正敘</option> </select><br> <button ng-click="add()" class="btn">添加球員</button> <table border="1px soilde #000" width="400px"> <tr> <th>姓名</th> <th>位置</th> <th>球號(hào)</th> <th>票數(shù)</th> </tr> <tr ng-repeat="item in data|filter:search3|orderBy:'piao':pai()"> <td>{{item.name}}</td> <td>{{item.wei}}</td> <td>{{item.hao}}</td> <td>{{item.piao}}</td> </tr> </table> <table border="1px solide #000" ng-show="show"> <tr> <td>姓名:</td> <td><input type="text" ng-model="uname"></td> </tr> <tr> <td>位置:</td> <td><input type="text" ng-model="uwei"></td> </tr> <tr> <td>球號(hào):</td> <td><input type="text" ng-model="uhao"></td> </tr> <tr> <td>票數(shù):</td> <td><input type="text" ng-model="upiao"></td> </tr> <tr align="center"><td><button ng-click="adduser()">添加</button></td></tr> </table> </body> </html>
總結(jié)
以上所述是小編給大家介紹的AngularJS模糊查詢功能實(shí)現(xiàn)代碼(過(guò)濾內(nèi)容下拉菜單排序過(guò)濾敏感字符驗(yàn)證判斷后添加表格信息),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。